TOC Minimap
Navigate page sections with a compact, hoverable TOC minimap.
- Registry (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
Credits
References
- soundcn — source for the u-mini-map-open sound effect.
License and usage
- Free to use and modify in both personal and commercial projects.
- Attribution is appreciated but not required.
- Released under the MIT License.