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

Notion — inspired by its compact document navigation.
Vercel Knowledge Base — inspired by its minimal documentation navigation.

Command Palette

Features

Installation

Usage

API Reference

TOCMinimap

TOCItemType

References