Anchor

A table of contents for one page, whose active link follows the reader as they scroll.

Basic

Pass items, each with an href pointing at a section's id, to build a rail that highlights the section in view.

Minimap

Set variant="minimap" to show the sections as a narrow rail of dashes that opens into the full list on hover.

Minimap placement

Set placement="left" when the rail sits on the right of the content, so the list opens toward the text.

Minimap expanded

Set expanded to keep the minimap's list open beside the content, with the reading progress still drawn next to each title.

Minimap width

Set panelWidth to fix the width of the minimap's list, kept open here with expanded, so long titles end in an ellipsis.

Horizontal

Set direction="horizontal" to lay the links out in a row above the content, like tabs that follow the scroll.

Nested items

Give an item children to nest links under it, like chapters listed under the part they belong to.

Scroll container

Set getContainer to the scrolling element when the sections scroll inside a panel instead of the page.

Target offset

Set targetOffset to the height of a sticky header so a clicked section lands below it and is highlighted on time.

Replace history

Set replace so each click replaces the current history entry, and Back leaves the page instead of stepping through sections.

Custom highlight

Pass getCurrentAnchor to choose which link is highlighted, like the part a chapter belongs to instead of the chapter.

On change

Pass onChange to hear when the section in view changes, by scroll or by click, like showing the current chapter in a header.

Custom click

Pass onClick to run code when a link is clicked, and call preventDefault() to keep the URL while the panel still scrolls.

API Reference

Anchor
Anchor's props.
AnchorItem
The props of one entry in items.