Command Palette

Search for a command to run...

1.7k

Command Palette

Search for a command to run...

Blog

TOC Minimap

Navigate page sections with a compact, hoverable TOC minimap.

Loading…
import type { TOCItemType } from "@/components/toc-minimap"
import { TOCMinimap } from "@/components/toc-minimap"
 
export default function TOCMinimapDemo() {
  return <TOCMinimap items={ITEMS} />
}
 
const ITEMS: TOCItemType[] = [
  { title: "Installation", url: "#installation", depth: 2 },
  { title: "Usage", url: "#usage", depth: 2 },
  { title: "API Reference", url: "#api-reference", depth: 2 },
  { title: "TOCMinimap", url: "#tocminimap", depth: 3 },
  { title: "TOCItemType", url: "#tocitemtype", depth: 3 },
  { title: "References", url: "#references", depth: 2 },
]

Features

  • Active heading state updates as readers scroll through the page.
  • Nested heading depth is represented in both the minimap and expanded TOC.
  • Hovering the minimap reveals a scrollable table of contents.
  • Section links update the URL hash and scroll smoothly to the target heading.

Installation

$ pnpm dlx shadcn@latest add @ncdai/toc-minimap

Usage

import { TOCMinimap } from "@/components/toc-minimap"
<TOCMinimap items={toc} />

API Reference

TOCMinimap

Prop

Type

TOCItemType

Prop

Type

References