diff --git a/DESIGN.md b/DESIGN.md
index 52aabb79bec7..e968520c73c2 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -211,6 +211,15 @@ Layout rules:
 - **Accessibility**: The button and polite live region use page-localized names and outcomes. The icon is decorative, the control remains keyboard-operable, and whole-note links omit heading fragments so section sharing stays owned by heading permalinks.
 - **Motion**: The beui `action-swap` blur/scale mechanism is adapted to the existing 150ms micro token, using a 3px blur and 75% scale only during the icon crossfade. Reduced-motion mode removes blur, scale, and press transforms while preserving the state change.
 
+### ReadingTrail
+
+- **Structure**: One 40px history action joins the existing reader action row. It opens a 320px anchored panel listing the notes visited immediately before the current note, newest first, with a bounded path hint for duplicate titles.
+- **Behavior**: Record eligible titled pages after `nav` and in-place `render` events. Revisiting a note moves it to the front, so a reader can retrace a nonlinear wander without duplicate entries. Opening the trail closes the overlapping `ReadLater` panel.
+- **Storage**: Keep at most 8 safe path, title, and visit-time entries in `sessionStorage`; the trail disappears with the tab session. No note text, account data, cookies, analytics, content writes, or external requests.
+- **States**: Empty, populated, open, cleared, storage fallback, hover, pressed, focus-visible, long-list scrolling, and repeated SPA initialization without duplicate nodes or listeners.
+- **Accessibility**: The localized trigger reports the number of prior notes; the panel has a localized heading; every entry is a native internal link; Escape and the close action restore trigger focus; clear is named and disabled when the list is empty.
+- **Motion**: Open and close are immediate. Existing 150ms color and press transitions apply to controls; reduced-motion mode removes press transforms, and print hides the trail.
+
 ## 6. Motion & Interaction
 
 Motion is quiet utility feedback, not brand theater.
diff --git a/quartz/components/renderPage.test.ts b/quartz/components/renderPage.test.ts
index 747044a8b765..80beec1dae3d 100644
--- a/quartz/components/renderPage.test.ts
+++ b/quartz/components/renderPage.test.ts
@@ -3,6 +3,7 @@ import assert from "node:assert"
 import {
   pageResources,
   readLaterTriggerLabels,
+  readingTrailTriggerLabels,
   renderTranscludes,
   resolvePageLocale,
 } from "./renderPage"
@@ -77,6 +78,14 @@ test("readLaterTriggerLabels evaluates bounded counts through the locale functio
   assert.equal(labels.length, 21)
 })
 
+test("readingTrailTriggerLabels evaluates every bounded count", () => {
+  const labels = readingTrailTriggerLabels(({ count }) => `${count} previous`)
+
+  assert.equal(labels[0], "0 previous")
+  assert.equal(labels[8], "8 previous")
+  assert.equal(labels.length, 9)
+})
+
 function makeComponentData(
   allFiles: QuartzComponentProps["allFiles"],
 ): Pick<QuartzComponentProps, "allFiles" | "cfg"> {
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 4a4bba342d90..3ad9fa130c22 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -17,6 +17,7 @@ import { resolveFrame } from "./frames"
 import type { TreeTransform } from "../plugins/types"
 import type { BuildCtx } from "../util/ctx"
 import { READ_LATER_LIMIT } from "./scripts/readLaterStorage"
+import { READING_TRAIL_LIMIT } from "./scripts/readingTrailStorage"
 
 interface RenderComponents {
   head: QuartzComponent
@@ -53,6 +54,12 @@ export function readLaterTriggerLabels(
   return Array.from({ length: READ_LATER_LIMIT + 1 }, (_, count) => trigger({ count }))
 }
 
+export function readingTrailTriggerLabels(
+  trigger: (variables: { count: number }) => string,
+): readonly string[] {
+  return Array.from({ length: READING_TRAIL_LIMIT + 1 }, (_, count) => trigger({ count }))
+}
+
 export function pageResources(
   baseDir: FullSlug | RelativeURL,
   staticResources: StaticResources,
@@ -373,6 +380,8 @@ export function renderPage(
   const randomWander = i18n(pageLocale).components.randomWander ?? fallbackRandomWander
   const fallbackNoteShare = TRANSLATIONS[defaultTranslation].components.noteShare
   const noteShare = i18n(pageLocale).components.noteShare ?? fallbackNoteShare
+  const fallbackReadingTrail = TRANSLATIONS[defaultTranslation].components.readingTrail
+  const readingTrail = i18n(pageLocale).components.readingTrail ?? fallbackReadingTrail
   // During local dev (--serve), the dev server serves from root without the
   // baseUrl subpath, so basePath must be empty to avoid broken links.
   const basePath =
@@ -410,6 +419,13 @@ export function renderPage(
         data-note-share-shared={noteShare.shared}
         data-note-share-copied={noteShare.copied}
         data-note-share-failed={noteShare.failed}
+        data-reading-trail-title={readingTrail.title}
+        data-reading-trail-trigger={JSON.stringify(readingTrailTriggerLabels(readingTrail.trigger))}
+        data-reading-trail-close={readingTrail.close}
+        data-reading-trail-clear={readingTrail.clear}
+        data-reading-trail-empty={readingTrail.empty}
+        data-reading-trail-cleared={readingTrail.cleared}
+        data-reading-trail-failed={readingTrail.failed}
       >
         {frame.css && <style dangerouslySetInnerHTML={{ __html: frame.css }} />}
         <div id="quartz-root" class="page" data-frame={frame.name}>
diff --git a/quartz/components/scripts/readingTrail.test.ts b/quartz/components/scripts/readingTrail.test.ts
new file mode 100644
index 000000000000..2b6e6d1c5e2f
--- /dev/null
+++ b/quartz/components/scripts/readingTrail.test.ts
@@ -0,0 +1,83 @@
+import assert from "node:assert"
+import test, { describe } from "node:test"
+import enUs from "../../i18n/locales/en-US"
+import zhCn from "../../i18n/locales/zh-CN"
+import zhTw from "../../i18n/locales/zh-TW"
+import { readingTrailScript } from "./readingTrail"
+import {
+  READING_TRAIL_LIMIT,
+  parseReadingTrailEntries,
+  recordReadingTrailEntry,
+  type ReadingTrailEntry,
+} from "./readingTrailStorage"
+
+test("reading-trail browser script compiles", () => {
+  assert.doesNotThrow(() => new Function(readingTrailScript))
+})
+
+test("reading-trail browser script follows the Quartz render lifecycle", () => {
+  assert.match(readingTrailScript, /sessionStorage\.getItem\(READING_TRAIL_KEY\)/)
+  assert.match(readingTrailScript, /document\.addEventListener\("nav", initializeReadingTrail\)/)
+  assert.match(readingTrailScript, /document\.addEventListener\("render", initializeReadingTrail\)/)
+  assert.match(readingTrailScript, /window\.addCleanup\(cleanupReadingTrail\)/)
+  assert.match(readingTrailScript, /entry\.path !== current\.path/)
+})
+
+test("reading-trail labels use the central locale catalog", () => {
+  assert.equal(enUs.components.readingTrail.trigger({ count: 1 }), "Reading trail, 1 previous note")
+  assert.equal(
+    enUs.components.readingTrail.trigger({ count: 2 }),
+    "Reading trail, 2 previous notes",
+  )
+  assert.equal(zhCn.components.readingTrail.title, "阅读足迹")
+  assert.equal(zhTw.components.readingTrail.clear, "清空閱讀足跡")
+})
+
+describe("reading-trail storage", () => {
+  test("keeps only safe unique entries ordered by their newest visit", () => {
+    const stored = JSON.stringify([
+      { path: "/older", title: " Older ", visitedAt: 10 },
+      { path: "javascript:alert(1)", title: "Unsafe", visitedAt: 50 },
+      { path: "//evil.example", title: "Protocol relative", visitedAt: 50 },
+      { path: "/line\nfeed", title: "Control", visitedAt: 50 },
+      { path: "/newer", title: "Newer", visitedAt: 30 },
+      { path: "/older", title: "Latest older", visitedAt: 20 },
+      { path: "/missing-title", title: "", visitedAt: 60 },
+    ])
+
+    assert.deepEqual(parseReadingTrailEntries(stored), [
+      { path: "/newer", title: "Newer", visitedAt: 30 },
+      { path: "/older", title: "Latest older", visitedAt: 20 },
+    ])
+  })
+
+  test("returns an empty list for malformed JSON", () => {
+    assert.deepEqual(parseReadingTrailEntries("[{"), [])
+  })
+
+  test("moves a revisited note to the front without a duplicate", () => {
+    const entries: readonly ReadingTrailEntry[] = [
+      { path: "/second", title: "Second", visitedAt: 20 },
+      { path: "/first", title: "First", visitedAt: 10 },
+    ]
+    const current = { path: "/first", title: "First again", visitedAt: 30 }
+
+    assert.deepEqual(recordReadingTrailEntry(entries, current), [current, entries[0]])
+  })
+
+  test("bounds the trail to the current note and seven prior notes", () => {
+    const entries: readonly ReadingTrailEntry[] = Array.from(
+      { length: READING_TRAIL_LIMIT },
+      (_, index) => ({ path: `/note-${index}`, title: `Note ${index}`, visitedAt: index }),
+    )
+    const current = { path: "/current", title: "Current", visitedAt: 100 }
+    const updated = recordReadingTrailEntry(entries, current)
+
+    assert.equal(updated.length, READING_TRAIL_LIMIT)
+    assert.deepEqual(updated[0], current)
+    assert.equal(
+      updated.some((entry) => entry.path === "/note-7"),
+      false,
+    )
+  })
+})
diff --git a/quartz/components/scripts/readingTrail.ts b/quartz/components/scripts/readingTrail.ts
new file mode 100644
index 000000000000..b284185d28b1
--- /dev/null
+++ b/quartz/components/scripts/readingTrail.ts
@@ -0,0 +1,263 @@
+import {
+  READING_TRAIL_LIMIT,
+  parseReadingTrailEntries,
+  parseReadingTrailEntry,
+  recordReadingTrailEntry,
+} from "./readingTrailStorage"
+
+export const readingTrailScript = `
+const READING_TRAIL_KEY = "dg3.readingTrail.v1"
+const READING_TRAIL_LIMIT = ${READING_TRAIL_LIMIT}
+const parseReadingTrailEntry = ${parseReadingTrailEntry.toString()}
+const parseReadingTrailEntries = ${parseReadingTrailEntries.toString()}
+const recordReadingTrailEntry = ${recordReadingTrailEntry.toString()}
+let fallbackReadingTrailEntries = []
+
+function readReadingTrailEntries() {
+  try {
+    const entries = parseReadingTrailEntries(sessionStorage.getItem(READING_TRAIL_KEY))
+    fallbackReadingTrailEntries = entries
+    return entries
+  } catch (error) {
+    if (error instanceof DOMException) return fallbackReadingTrailEntries
+    throw error
+  }
+}
+
+function writeReadingTrailEntries(entries) {
+  fallbackReadingTrailEntries = entries
+  try {
+    sessionStorage.setItem(READING_TRAIL_KEY, JSON.stringify(entries))
+    return true
+  } catch (error) {
+    if (error instanceof DOMException) return false
+    throw error
+  }
+}
+
+function createReadingTrailIcon(pathData, className) {
+  const namespace = "http://www.w3.org/2000/svg"
+  const icon = document.createElementNS(namespace, "svg")
+  icon.classList.add(className)
+  icon.setAttribute("viewBox", "0 0 24 24")
+  icon.setAttribute("fill", "none")
+  icon.setAttribute("stroke", "currentColor")
+  icon.setAttribute("aria-hidden", "true")
+  for (const data of pathData) {
+    const path = document.createElementNS(namespace, "path")
+    path.setAttribute("d", data)
+    icon.append(path)
+  }
+  return icon
+}
+
+function getReadingTrailLabels() {
+  const {
+    readingTrailTitle: title,
+    readingTrailTrigger: serializedTriggers,
+    readingTrailClose: close,
+    readingTrailClear: clear,
+    readingTrailEmpty: empty,
+    readingTrailCleared: cleared,
+    readingTrailFailed: failed,
+  } = document.body.dataset
+  if (!title || !serializedTriggers || !close || !clear || !empty || !cleared || !failed) {
+    return undefined
+  }
+
+  let triggers
+  try {
+    triggers = JSON.parse(serializedTriggers)
+  } catch {
+    return undefined
+  }
+  if (
+    !Array.isArray(triggers) ||
+    triggers.length !== READING_TRAIL_LIMIT + 1 ||
+    triggers.some((label) => typeof label !== "string" || label.length === 0)
+  ) {
+    return undefined
+  }
+  return { title, trigger: (count) => triggers[count], close, clear, empty, cleared, failed }
+}
+
+let cleanupCurrentReadingTrail = () => {}
+const cleanupReadingTrail = () => {
+  const cleanup = cleanupCurrentReadingTrail
+  cleanupCurrentReadingTrail = () => {}
+  cleanup()
+}
+
+function initializeReadingTrail() {
+  cleanupReadingTrail()
+  const titleElement = document.querySelector("h1.article-title")
+  const anchor = document.querySelector(".content-meta") ?? titleElement
+  const title = titleElement?.textContent?.trim()
+  const labels = getReadingTrailLabels()
+  if (anchor === null || !title || labels === undefined) return
+
+  const current = parseReadingTrailEntry({
+    path: location.pathname,
+    title,
+    visitedAt: Date.now(),
+  })
+  if (current === undefined) return
+
+  let entries = recordReadingTrailEntry(readReadingTrailEntries(), current)
+  let storageFailed = !writeReadingTrailEntries(entries)
+  const existingRoot =
+    document.querySelector("[data-read-later-root]") ?? document.querySelector(".note-share-only")
+  const root = existingRoot ?? document.createElement("div")
+  const ownsRoot = existingRoot === null
+  root.classList.add("reader-actions")
+  if (ownsRoot) {
+    root.classList.add("reading-trail-only")
+    anchor.insertAdjacentElement("afterend", root)
+  }
+
+  const trigger = document.createElement("button")
+  trigger.type = "button"
+  trigger.className = "reading-trail-trigger"
+  trigger.setAttribute("aria-controls", "reading-trail-panel")
+  trigger.setAttribute("aria-expanded", "false")
+  trigger.append(
+    createReadingTrailIcon(
+      ["M3 12a9 9 0 1 0 3-6.7L3 8", "M3 3v5h5", "M12 7v5l4 2"],
+      "reading-trail-icon",
+    ),
+  )
+  const count = document.createElement("span")
+  count.className = "reading-trail-count"
+  count.setAttribute("aria-hidden", "true")
+  trigger.append(count)
+
+  const panel = document.createElement("section")
+  panel.id = "reading-trail-panel"
+  panel.className = "reading-trail-panel"
+  panel.setAttribute("aria-label", labels.title)
+  panel.hidden = true
+  const header = document.createElement("header")
+  header.className = "reading-trail-header"
+  const heading = document.createElement("h2")
+  heading.textContent = labels.title
+  const headerActions = document.createElement("div")
+  headerActions.className = "reading-trail-header-actions"
+  const clearButton = document.createElement("button")
+  clearButton.type = "button"
+  clearButton.className = "reading-trail-clear"
+  clearButton.title = labels.clear
+  clearButton.setAttribute("aria-label", labels.clear)
+  clearButton.append(
+    createReadingTrailIcon(
+      ["M3 6h18", "M8 6V4h8v2", "m19 6-1 14H6L5 6", "M10 11v5", "M14 11v5"],
+      "reading-trail-action-icon",
+    ),
+  )
+  const closeButton = document.createElement("button")
+  closeButton.type = "button"
+  closeButton.className = "reading-trail-close"
+  closeButton.textContent = "×"
+  closeButton.title = labels.close
+  closeButton.setAttribute("aria-label", labels.close)
+  headerActions.append(clearButton, closeButton)
+  header.append(heading, headerActions)
+  const list = document.createElement("ol")
+  list.className = "reading-trail-list"
+  const status = document.createElement("p")
+  status.className = "reading-trail-status"
+  status.setAttribute("aria-live", "polite")
+  panel.append(header, list, status)
+  root.prepend(trigger)
+  root.append(panel)
+
+  const closePanel = (restoreFocus) => {
+    panel.hidden = true
+    trigger.setAttribute("aria-expanded", "false")
+    if (restoreFocus) trigger.focus()
+  }
+  const previousEntries = () => entries.filter((entry) => entry.path !== current.path)
+  const render = () => {
+    const previous = previousEntries()
+    count.hidden = previous.length === 0
+    count.textContent = String(previous.length)
+    trigger.title = labels.trigger(previous.length)
+    trigger.setAttribute("aria-label", labels.trigger(previous.length))
+    clearButton.disabled = previous.length === 0
+    list.replaceChildren()
+    if (previous.length === 0) {
+      const empty = document.createElement("li")
+      empty.className = "reading-trail-empty"
+      empty.textContent = labels.empty
+      list.append(empty)
+      return
+    }
+
+    for (const entry of previous) {
+      const item = document.createElement("li")
+      const link = document.createElement("a")
+      link.className = "reading-trail-link internal"
+      link.href = entry.path
+      link.dataset.noPopover = ""
+      const entryTitle = document.createElement("span")
+      entryTitle.className = "reading-trail-entry-title"
+      entryTitle.textContent = entry.title
+      const entryPath = document.createElement("span")
+      entryPath.className = "reading-trail-entry-path"
+      entryPath.textContent = entry.path
+      link.append(entryTitle, entryPath)
+      link.addEventListener("click", () => closePanel(false))
+      item.append(link)
+      list.append(item)
+    }
+  }
+
+  trigger.addEventListener("click", () => {
+    panel.hidden = !panel.hidden
+    trigger.setAttribute("aria-expanded", String(!panel.hidden))
+    if (!panel.hidden) {
+      const readLaterPanel = root.querySelector(".read-later-panel")
+      const readLaterTrigger = root.querySelector(".read-later-trigger")
+      if (readLaterPanel instanceof HTMLElement) readLaterPanel.hidden = true
+      readLaterTrigger?.setAttribute("aria-expanded", "false")
+      if (storageFailed) status.textContent = labels.failed
+      const firstLink = list.querySelector("a")
+      if (firstLink instanceof HTMLElement) firstLink.focus()
+      else closeButton.focus()
+    }
+  })
+  closeButton.addEventListener("click", () => closePanel(true))
+  clearButton.addEventListener("click", () => {
+    entries = []
+    storageFailed = !writeReadingTrailEntries(entries)
+    status.textContent = storageFailed ? labels.failed : labels.cleared
+    render()
+    closeButton.focus()
+  })
+  const dismissOutside = (event) => {
+    if (
+      event.target instanceof Node &&
+      !panel.contains(event.target) &&
+      !trigger.contains(event.target)
+    ) {
+      closePanel(false)
+    }
+  }
+  const dismissWithKeyboard = (event) => {
+    if (event.key === "Escape" && !panel.hidden) closePanel(true)
+  }
+  document.addEventListener("pointerdown", dismissOutside)
+  document.addEventListener("keydown", dismissWithKeyboard)
+  cleanupCurrentReadingTrail = () => {
+    document.removeEventListener("pointerdown", dismissOutside)
+    document.removeEventListener("keydown", dismissWithKeyboard)
+    trigger.remove()
+    panel.remove()
+    if (ownsRoot) root.remove()
+  }
+  window.addCleanup(cleanupReadingTrail)
+  render()
+}
+
+document.addEventListener("nav", initializeReadingTrail)
+document.addEventListener("render", initializeReadingTrail)
+`
diff --git a/quartz/components/scripts/readingTrailStorage.ts b/quartz/components/scripts/readingTrailStorage.ts
new file mode 100644
index 000000000000..8d3f71f65a68
--- /dev/null
+++ b/quartz/components/scripts/readingTrailStorage.ts
@@ -0,0 +1,78 @@
+export const READING_TRAIL_LIMIT = 8
+
+export type ReadingTrailEntry = Readonly<{
+  path: string
+  title: string
+  visitedAt: number
+}>
+
+export function parseReadingTrailEntry(candidate: unknown): ReadingTrailEntry | undefined {
+  if (typeof candidate !== "object" || candidate === null) return undefined
+
+  const path: unknown = Reflect.get(candidate, "path")
+  const title: unknown = Reflect.get(candidate, "title")
+  const visitedAt: unknown = Reflect.get(candidate, "visitedAt")
+  if (
+    typeof path !== "string" ||
+    path.length > 2048 ||
+    !path.startsWith("/") ||
+    path.startsWith("//") ||
+    path.includes("\\") ||
+    /[\u0000-\u0020\u007f]/u.test(path) ||
+    typeof title !== "string" ||
+    typeof visitedAt !== "number" ||
+    !Number.isSafeInteger(visitedAt) ||
+    visitedAt < 0
+  ) {
+    return undefined
+  }
+
+  let resolvedPath: URL
+  try {
+    resolvedPath = new URL(path, "https://reading-trail.invalid/")
+  } catch {
+    return undefined
+  }
+  if (resolvedPath.origin !== "https://reading-trail.invalid") return undefined
+
+  const normalizedTitle = title.trim().slice(0, 200)
+  if (normalizedTitle.length === 0) return undefined
+  return { path, title: normalizedTitle, visitedAt }
+}
+
+export function parseReadingTrailEntries(raw: string | null): readonly ReadingTrailEntry[] {
+  if (raw === null) return []
+
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(raw)
+  } catch (error) {
+    if (error instanceof SyntaxError) return []
+    throw error
+  }
+  if (!Array.isArray(parsed)) return []
+
+  const newestByPath = new Map<string, ReadingTrailEntry>()
+  for (const candidate of parsed as readonly unknown[]) {
+    const entry = parseReadingTrailEntry(candidate)
+    if (entry === undefined) continue
+    const existing = newestByPath.get(entry.path)
+    if (existing === undefined || entry.visitedAt > existing.visitedAt) {
+      newestByPath.set(entry.path, entry)
+    }
+  }
+
+  return [...newestByPath.values()]
+    .sort((first, second) => second.visitedAt - first.visitedAt)
+    .slice(0, READING_TRAIL_LIMIT)
+}
+
+export function recordReadingTrailEntry(
+  entries: readonly ReadingTrailEntry[],
+  current: ReadingTrailEntry,
+): readonly ReadingTrailEntry[] {
+  return [current, ...entries.filter((entry) => entry.path !== current.path)].slice(
+    0,
+    READING_TRAIL_LIMIT,
+  )
+}
diff --git a/quartz/components/styles/readingTrail.scss b/quartz/components/styles/readingTrail.scss
new file mode 100644
index 000000000000..c6e9dd4a4fea
--- /dev/null
+++ b/quartz/components/styles/readingTrail.scss
@@ -0,0 +1,237 @@
+.reading-trail-only {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  width: fit-content;
+  margin-block: -0.5rem 1rem;
+  margin-inline: auto 0;
+  justify-content: flex-end;
+}
+
+.reading-trail-trigger,
+.reading-trail-close,
+.reading-trail-clear {
+  appearance: none;
+  box-sizing: border-box;
+  border: 1px solid color-mix(in srgb, var(--gray) 54%, transparent);
+  border-radius: 6px;
+  background-color: var(--light);
+  color: var(--dark);
+  font: inherit;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition:
+    background-color 0.15s ease-out,
+    color 0.15s ease-out,
+    transform 0.15s ease-out;
+
+  &:hover:not(:disabled) {
+    border-color: var(--secondary);
+    background-color: var(--lightgray);
+    color: var(--secondary);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.96);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--secondary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.45;
+  }
+}
+
+.reading-trail-trigger {
+  position: relative;
+  display: grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex: 0 0 2.5rem;
+  padding: 0;
+  place-items: center;
+}
+
+.reading-trail-icon,
+.reading-trail-action-icon {
+  width: 1.125rem;
+  height: 1.125rem;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.reading-trail-count {
+  position: absolute;
+  inset-block-start: -0.375rem;
+  inset-inline-end: -0.375rem;
+  display: grid;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  place-items: center;
+  border: 1px solid var(--light);
+  border-radius: 999px;
+  background-color: var(--secondary);
+  color: var(--light);
+  font-family: var(--codeFont);
+  font-size: 0.625rem;
+  line-height: 1;
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.reading-trail-panel {
+  position: absolute;
+  inset-block-start: calc(100% + 0.5rem);
+  inset-inline-end: 0;
+  box-sizing: border-box;
+  width: min(20rem, calc(100vw - 2rem));
+  padding: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--gray) 54%, transparent);
+  border-radius: 6px;
+  background-color: var(--light);
+  color: var(--darkgray);
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.reading-trail-header,
+.reading-trail-header-actions {
+  display: flex;
+  align-items: center;
+}
+
+.reading-trail-header {
+  min-height: 2rem;
+  justify-content: space-between;
+  gap: 0.75rem;
+
+  h2 {
+    margin: 0;
+    font-size: 1rem;
+    letter-spacing: 0;
+    line-height: 1.25;
+  }
+}
+
+.reading-trail-header-actions {
+  gap: 0.375rem;
+}
+
+.reading-trail-close,
+.reading-trail-clear {
+  display: grid;
+  width: 2rem;
+  height: 2rem;
+  flex: 0 0 2rem;
+  padding: 0;
+  place-items: center;
+  line-height: 1;
+}
+
+.reading-trail-close {
+  font-family: var(--codeFont);
+  font-size: 1.125rem;
+}
+
+.reading-trail-list {
+  max-height: 15rem;
+  margin: 0.75rem 0 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+
+  > li + li {
+    border-top: 1px solid var(--lightgray);
+  }
+}
+
+.reading-trail-link {
+  display: grid;
+  min-width: 0;
+  padding: 0.625rem 0.25rem;
+  gap: 0.125rem;
+  text-decoration: none;
+}
+
+.reading-trail-entry-title,
+.reading-trail-entry-path {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.reading-trail-entry-title {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--dark);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-height: 1.35;
+}
+
+.reading-trail-entry-path {
+  overflow: hidden;
+  color: var(--gray);
+  font-family: var(--codeFont);
+  font-size: 0.75rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.reading-trail-link:hover .reading-trail-entry-title,
+.reading-trail-link:focus-visible .reading-trail-entry-title {
+  color: var(--secondary);
+}
+
+.reading-trail-link:focus-visible {
+  border-radius: 4px;
+  outline: 2px solid var(--secondary);
+  outline-offset: -2px;
+}
+
+.reading-trail-empty {
+  padding: 0.75rem 0.25rem;
+  color: var(--gray);
+  line-height: 1.5;
+}
+
+.reading-trail-status {
+  margin: 0.5rem 0 0;
+  color: var(--gray);
+  font-size: 0.875rem;
+  line-height: 1.4;
+
+  &:empty {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reading-trail-trigger,
+  .reading-trail-close,
+  .reading-trail-clear {
+    transition: none;
+
+    &:active {
+      transform: none;
+    }
+  }
+}
+
+@media print {
+  .reading-trail-trigger,
+  .reading-trail-panel,
+  .reading-trail-only {
+    display: none;
+  }
+}
diff --git a/quartz/i18n/locales/definition.ts b/quartz/i18n/locales/definition.ts
index 31618f1acc78..83832367425d 100644
--- a/quartz/i18n/locales/definition.ts
+++ b/quartz/i18n/locales/definition.ts
@@ -83,6 +83,15 @@ export interface Translation {
       copied: string
       failed: string
     }
+    readingTrail?: {
+      title: string
+      trigger: (variables: { count: number }) => string
+      close: string
+      clear: string
+      empty: string
+      cleared: string
+      failed: string
+    }
     explorer: {
       title: string
     }
diff --git a/quartz/i18n/locales/en-US.ts b/quartz/i18n/locales/en-US.ts
index 0d47135d97cf..6d420002d8bc 100644
--- a/quartz/i18n/locales/en-US.ts
+++ b/quartz/i18n/locales/en-US.ts
@@ -80,6 +80,16 @@ export default {
       copied: "Note link copied",
       failed: "The browser could not share this note",
     },
+    readingTrail: {
+      title: "Reading trail",
+      trigger: ({ count }) =>
+        count === 1 ? "Reading trail, 1 previous note" : `Reading trail, ${count} previous notes`,
+      close: "Close reading trail",
+      clear: "Clear reading trail",
+      empty: "No previous notes in this tab yet",
+      cleared: "Reading trail cleared",
+      failed: "The browser could not keep this reading trail",
+    },
     explorer: {
       title: "Explorer",
     },
diff --git a/quartz/i18n/locales/zh-CN.ts b/quartz/i18n/locales/zh-CN.ts
index 7aa8cf7c2103..e17e15f16beb 100644
--- a/quartz/i18n/locales/zh-CN.ts
+++ b/quartz/i18n/locales/zh-CN.ts
@@ -80,6 +80,15 @@ export default {
       copied: "笔记链接已复制",
       failed: "浏览器未能分享这篇笔记",
     },
+    readingTrail: {
+      title: "阅读足迹",
+      trigger: ({ count }) => `阅读足迹，前面有 ${count} 篇笔记`,
+      close: "关闭阅读足迹",
+      clear: "清空阅读足迹",
+      empty: "这个标签页还没有之前读过的笔记",
+      cleared: "阅读足迹已清空",
+      failed: "浏览器未能保留阅读足迹",
+    },
     explorer: {
       title: "探索",
     },
diff --git a/quartz/i18n/locales/zh-TW.ts b/quartz/i18n/locales/zh-TW.ts
index 9bfcd9e4e845..b5114b3aef5e 100644
--- a/quartz/i18n/locales/zh-TW.ts
+++ b/quartz/i18n/locales/zh-TW.ts
@@ -77,6 +77,15 @@ export default {
       copied: "筆記連結已複製",
       failed: "瀏覽器未能分享這篇筆記",
     },
+    readingTrail: {
+      title: "閱讀足跡",
+      trigger: ({ count }) => `閱讀足跡，前面有 ${count} 篇筆記`,
+      close: "關閉閱讀足跡",
+      clear: "清空閱讀足跡",
+      empty: "這個分頁還沒有之前讀過的筆記",
+      cleared: "閱讀足跡已清空",
+      failed: "瀏覽器未能保留閱讀足跡",
+    },
     explorer: {
       title: "探索",
     },
diff --git a/quartz/plugins/emitters/componentResources.test.ts b/quartz/plugins/emitters/componentResources.test.ts
index 36f165ea41af..05a277839561 100644
--- a/quartz/plugins/emitters/componentResources.test.ts
+++ b/quartz/plugins/emitters/componentResources.test.ts
@@ -143,4 +143,22 @@ describe("componentResources", () => {
       assert.ok(noteShareStyleIndex < spaBranchIndex)
     })
   })
+
+  test("includes the reading trail when SPA navigation is disabled", () => {
+    const emitterPath = new URL("./componentResources.ts", import.meta.url)
+    const source = readFile(emitterPath, "utf8")
+
+    return source.then((contents) => {
+      const scriptIndex = contents.indexOf(
+        "componentResources.afterDOMLoaded.push(readingTrailScript)",
+      )
+      const styleIndex = contents.indexOf("componentResources.css.push(readingTrailStyle)")
+      const spaBranchIndex = contents.indexOf("if (cfg.enableSPA)")
+
+      assert.notEqual(scriptIndex, -1)
+      assert.notEqual(styleIndex, -1)
+      assert.ok(scriptIndex < spaBranchIndex)
+      assert.ok(styleIndex < spaBranchIndex)
+    })
+  })
 })
diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index ceff787ee2ba..141d76fb5e6e 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -24,6 +24,8 @@ import { randomWanderScript } from "../../components/scripts/randomWander"
 import randomWanderStyle from "../../components/styles/randomWander.scss"
 import { noteShareScript } from "../../components/scripts/noteShare"
 import noteShareStyle from "../../components/styles/noteShare.scss"
+import { readingTrailScript } from "../../components/scripts/readingTrail"
+import readingTrailStyle from "../../components/styles/readingTrail.scss"
 import { BuildCtx } from "../../util/ctx"
 import { QuartzComponent } from "../../components/types"
 import { normalizeResource } from "../../util/resources"
@@ -114,6 +116,8 @@ function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentReso
   componentResources.css.push(randomWanderStyle)
   componentResources.afterDOMLoaded.push(noteShareScript)
   componentResources.css.push(noteShareStyle)
+  componentResources.afterDOMLoaded.push(readingTrailScript)
+  componentResources.css.push(readingTrailStyle)
 
   // popovers
   if (cfg.enablePopovers) {