Navigation
A mobile-first pill showing the current section, expanding into a dropdown on tap — for the narrow viewports a sidebar TOC doesn't fit
Scroll this panel - the pill below updates automatically as this section comes into view.
Scroll this panel - the pill below updates automatically as this section comes into view.
Scroll this panel - the pill below updates automatically as this section comes into view.
Scroll this panel - the pill below updates automatically as this section comes into view.
Scroll this panel - the pill below updates automatically as this section comes into view.
See how to use it on your page, then copy the component file itself.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TocItem[] | — | Array of sections to list, in order |
| items[].id | string | — | Matches the id attribute of the section element to scroll to and track |
| items[].label | string | — | Text shown for this item when the dropdown is open |
| contentRef | RefObject<HTMLElement> | — | Ref to the container holding the sections being tracked |
| title | string | "On this page" | Small label shown above the list when the dropdown is open |
| accentColor | string | "#4A68E5" | Accent color for the pill label and the active item |