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

Install-Module cnpx -Scope CurrentUser -Force; Import-Module cnpx; cnpx add @chadnpc/toc-minimap

Usage

import { TOCMinimap } from "@/components/toc-minimap"

<TOCMinimap items={toc} />

API reference

TOCMinimap

TOCItemType

Credits

• Notion
• Vercel

References

• soundcn - source for the u-mini-map-open sound effect.