diff --git a/src/components/Posts/PostMenu.astro b/src/components/Posts/PostMenu.astro
new file mode 100644
index 0000000..a81e4d8
--- /dev/null
+++ b/src/components/Posts/PostMenu.astro
@@ -0,0 +1,335 @@
+---
+interface Heading {
+    depth: number;
+    slug: string;
+    text: string;
+}
+
+interface Props {
+    headings: Heading[];
+}
+
+const { headings = [] } = Astro.props;
+
+// 只取 h2 / h3，博客目录最常见
+const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
+
+// 手机端按钮里显示的“目录: 第一节、xxxxx”
+const mobilePreview = tocHeadings[0]?.text ?? "本文目录";
+---
+
+{
+    tocHeadings.length > 0 && (
+        <>
+            <button
+                class="post-menu-mobile-toggle"
+                type="button"
+                aria-expanded="false"
+                aria-controls="post-menu-panel"
+                aria-label="目录"
+            >
+                <span
+                    class="post-menu-mobile-preview"
+                    data-post-menu-preview
+                    data-default-text={tocHeadings[0]?.text ?? "本文目录"}
+                >
+                    {tocHeadings[0]?.text ?? "本文目录"}
+                </span>
+
+                <span class="post-menu-mobile-icon" aria-hidden="true">
+                    <svg
+                        viewBox="0 0 24 24"
+                        width="16"
+                        height="16"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M5 6.5H19M5 12H19M5 17.5H19"
+                            stroke="currentColor"
+                            stroke-width="1.8"
+                            stroke-linecap="round"
+                        />
+                        <circle cx="3.5" cy="6.5" r="1" fill="currentColor" />
+                        <circle cx="3.5" cy="12" r="1" fill="currentColor" />
+                        <circle cx="3.5" cy="17.5" r="1" fill="currentColor" />
+                    </svg>
+                </span>
+            </button>
+
+            <aside class="post-menu" id="post-menu-panel">
+                <nav aria-label="Table of contents">
+                    <p class="post-menu-title">目录</p>
+                    <ul class="post-menu-list">
+                        {tocHeadings.map((heading) => (
+                            <li class={`post-menu-item depth-${heading.depth}`}>
+                                <a
+                                    href={`#${heading.slug}`}
+                                    data-heading-link
+                                    data-heading-text={heading.text}
+                                >
+                                    {heading.text}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
+            </aside>
+        </>
+    )
+}
+
+<script is:inline>
+    (() => {
+        const btn = document.querySelector(".post-menu-mobile-toggle");
+        const panel = document.querySelector("#post-menu-panel");
+
+        if (!btn || !panel) return;
+
+        btn.addEventListener("click", () => {
+            const expanded = btn.getAttribute("aria-expanded") === "true";
+            btn.setAttribute("aria-expanded", String(!expanded));
+            panel.classList.toggle("is-open", !expanded);
+        });
+    })();
+</script>
+
+<style>
+    .post-menu {
+        box-sizing: border-box;
+    }
+
+    .post-menu-title {
+        margin: 0 0 0.8rem;
+        font-size: 0.95rem;
+        opacity: 0.7;
+    }
+
+    .post-menu-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .post-menu-item {
+        margin: 0.45rem 0;
+        line-height: 1.5;
+    }
+
+    .post-menu-item.depth-3 {
+        padding-left: 1rem;
+        opacity: 0.82;
+        font-size: 0.95em;
+    }
+
+    .post-menu a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .post-menu a:hover {
+        text-decoration: underline;
+    }
+
+    .post-menu-mobile-toggle {
+        display: none;
+    }
+
+    @media (min-width: 1200px) {
+        .post-menu {
+            --menu-width: 180px;
+            position: fixed;
+            top: 8.5rem;
+            width: var(--menu-width);
+            left: max(1rem, calc((100vw - 760px) / 4 - var(--menu-width) / 2));
+            max-height: calc(100vh - 10rem);
+            overflow: auto;
+            padding: 0.2rem 0.2rem 0.2rem 0;
+            opacity: 0.9;
+        }
+    }
+
+    @media (max-width: 1199px) {
+        .post-menu-mobile-toggle {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            position: fixed;
+            top: 0.75rem;
+            right: 0.8rem;
+            z-index: 30;
+            max-width: min(78vw, 22rem);
+            padding: 0.45rem 0.75rem;
+            border: 1.5px solid rgba(123, 169, 255, 0.55);
+            border-radius: 999px;
+            background: rgba(249, 242, 237, 0.92);
+            backdrop-filter: blur(6px);
+            color: inherit;
+            font-size: 0.8rem;
+            cursor: pointer;
+
+            opacity: 0;
+            transform: translateY(calc(-100% - 0.6rem));
+            pointer-events: none;
+            transition:
+                transform 0.28s ease,
+                opacity 0.22s ease;
+        }
+
+        .post-menu-mobile-toggle.is-visible {
+            opacity: 1;
+            transform: translateY(calc(env(safe-area-inset-top) + 0.4rem));
+            pointer-events: auto;
+        }
+
+        .post-menu-mobile-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex: 0 0 auto;
+            opacity: 0.78;
+        }
+
+        .post-menu-mobile-preview {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 14rem;
+        }
+
+        .post-menu {
+            display: none;
+            position: fixed;
+            top: calc(env(safe-area-inset-top) + 4.2rem);
+            right: 0.8rem;
+            z-index: 29;
+            width: min(88vw, 24rem);
+            max-height: min(65vh, 32rem);
+            overflow: auto;
+            padding: 0.9rem 1rem;
+            border: 1.5px solid rgba(128, 128, 128, 0.55);
+            /* border-radius: 1rem; */
+            background: rgba(255, 255, 255, 0.96);
+            backdrop-filter: blur(8px);
+            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
+        }
+
+        .post-menu.is-open {
+            display: block;
+        }
+    }
+</style>
+
+<script is:inline>
+    (() => {
+        const setupPostMenu = () => {
+            const btn = document.querySelector(".post-menu-mobile-toggle");
+            const panel = document.querySelector("#post-menu-panel");
+            const preview = document.querySelector("[data-post-menu-preview]");
+            const headingLinks = Array.from(
+                document.querySelectorAll("[data-heading-link]"),
+            );
+
+            if (!btn || !panel || !preview || headingLinks.length === 0) return;
+
+            const defaultText =
+                preview.getAttribute("data-default-text") || "本文目录";
+
+            const getHeadingElements = () =>
+                headingLinks
+                    .map((link) => {
+                        const href = link.getAttribute("href");
+                        if (!href || !href.startsWith("#")) return null;
+
+                        const el = document.getElementById(href.slice(1));
+                        if (!el) return null;
+
+                        return {
+                            link,
+                            el,
+                            text:
+                                link.getAttribute("data-heading-text") ||
+                                el.textContent ||
+                                defaultText,
+                        };
+                    })
+                    .filter(Boolean);
+
+            let headingItems = getHeadingElements();
+
+            const closeMenu = () => {
+                panel.classList.remove("is-open");
+                btn.setAttribute("aria-expanded", "false");
+            };
+
+            const updateVisibility = () => {
+                if (window.innerWidth > 1199) {
+                    btn.classList.remove("is-visible");
+                    closeMenu();
+                    return;
+                }
+
+                const shouldShow = window.scrollY > 300;
+                btn.classList.toggle("is-visible", shouldShow);
+
+                if (!shouldShow) {
+                    closeMenu();
+                }
+            };
+
+            const updateCurrentHeading = () => {
+                if (window.innerWidth > 1099) return;
+
+                headingItems = getHeadingElements();
+
+                let current = null;
+                const triggerLine = 140;
+
+                for (const item of headingItems) {
+                    const rect = item.el.getBoundingClientRect();
+                    if (rect.top <= triggerLine) {
+                        current = item;
+                    } else {
+                        break;
+                    }
+                }
+
+                preview.textContent = current ? current.text : defaultText;
+
+                headingLinks.forEach((link) =>
+                    link.classList.remove("is-current"),
+                );
+                if (current) current.link.classList.add("is-current");
+            };
+
+            const toggleMenu = () => {
+                const expanded = btn.getAttribute("aria-expanded") === "true";
+                btn.setAttribute("aria-expanded", String(!expanded));
+                panel.classList.toggle("is-open", !expanded);
+            };
+
+            btn.addEventListener("click", toggleMenu);
+
+            panel.addEventListener("click", (e) => {
+                const target = e.target;
+                if (target instanceof Element && target.closest("a")) {
+                    closeMenu();
+                }
+            });
+
+            const onScroll = () => {
+                updateVisibility();
+                updateCurrentHeading();
+            };
+
+            window.addEventListener("scroll", onScroll, { passive: true });
+            window.addEventListener("resize", onScroll);
+
+            updateVisibility();
+            updateCurrentHeading();
+        };
+
+        setupPostMenu();
+        document.addEventListener("astro:page-load", setupPostMenu);
+    })();
+</script>
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
index 4c45f43..9ea5aa0 100644
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -2,11 +2,12 @@
 import BaseLayout from "./BaseLayout.astro";
 import Remark42Embed from "@/components/Remark42Embed.astro";
 import PostNav from "@/components/Posts/PostNav.astro";
+import PostMenu from "@/components/Posts/PostMenu.astro";
 import { fade } from "astro:transitions";
 import { getTranslations } from "@/i18n";
 import "@/styles/global.css";
 
-const { post, frontmatter, lang, slug, postId } = Astro.props;
+const { post, frontmatter, lang, slug, postId, headings } = Astro.props;
 const comments = lang === "zh" ? "评论区" : "comments";
 const t = getTranslations(lang);
 ---
@@ -38,6 +39,9 @@ const t = getTranslations(lang);
       <path d="M15 18l-6-6 6-6"></path>
     </svg>
   </a>
+
+  <PostMenu headings={headings} />
+
   <article class="post-article">
     <div class="post-header">
       <div class="post-meta">
diff --git a/src/pages/[lang]/posts/[...slug].astro b/src/pages/[lang]/posts/[...slug].astro
index e09f631..4d00d90 100644
--- a/src/pages/[lang]/posts/[...slug].astro
+++ b/src/pages/[lang]/posts/[...slug].astro
@@ -22,7 +22,7 @@ export async function getStaticPaths() {
 }
 
 const { post, lang } = Astro.props;
-const { Content } = await render(post);
+const { Content, headings } = await render(post);
 
 const [postLang, ...slugParts] = post.id.split("/");
 const slug = slugParts.join("/");
@@ -34,6 +34,7 @@ const slug = slugParts.join("/");
     lang={lang}
     slug={slug}
     postId={post.id}
+    headings={headings}
 >
     <Content />
 </MarkdownPostLayout>