Navigate page sections with a compact, hoverable TOC minimap.
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
- Notion — inspired by its compact document navigation.
- Vercel Knowledge Base — inspired by its minimal documentation navigation.