Inline TOC

InlineTOC renders the page's headings as a collapsible list in the body. Use it on long pages, on full pages where the right-hand TOC is replaced by the popover bar, or in printed documentation.

Usage#

<InlineTOC
  title="On this page"
  defaultOpen
  items={[
    { id: "usage", title: "Usage", depth: 2 },
    { id: "from-the-route", title: "From the route", depth: 2 },
    { id: "props", title: "Props", depth: 2 },
  ]}
/>

Inside MDX the items are written by hand, because the compiled page does not receive its own TOC as a variable. Items are TocItem objects: an id matching a heading anchor, the title, and the depth used for indentation.

From the route#

In a route file the page's collected headings are available as page.toc, so the component can render the real TOC without duplicating it:

import { InlineTOC } from "pzzadocs/mdx";

<DocsBody>
  <InlineTOC items={page.toc} />
  {page.content}
</DocsBody>

Pair it with full: true in the frontmatter to get a wide article with the contents at the top.

Props#