Skip to content

TOC

On-this-page navigation — scroll-spy with animated active indicator and depth-aware indentation.

Installation

Included in the starter. Every new site has it in src/components/ui/toc/. Import it where you need it, or register it in src/components.ts to use it on every page. If your site predates it, install it:

npx @cloudflare/nimbus-docs add toc

Preview

<TOC
headings={[
  { depth: 2, text: "Installation", slug: "installation" },
  { depth: 2, text: "Preview", slug: "preview" },
  { depth: 3, text: "Nested headings", slug: "nested-headings" },
  { depth: 2, text: "API reference", slug: "api-reference" },
]}
/>

Nested headings

A third-level heading sits under its section, indented, as this one does in the preview.

API reference

Every prop the component accepts, sourced from a single declaration.

PropType
headingsrequired
TOCItem[]

Type to search…

↑↓ navigate↵ selectEsc close