Navigation
A sticky, scrollspy-driven TOC with nested sub-sections, for docs and long articles — best on desktop, where a side rail fits
Scroll this panel - the item on the left highlights automatically as this section comes into view.
Scroll this panel - the item on the left highlights automatically as this section comes into view.
Scroll this panel - the item on the left highlights automatically as this section comes into view.
Scroll this panel - the item on the left highlights automatically as this section comes into view.
Scroll this panel - the item on the left highlights automatically as this section comes into view.
Scroll this panel - the item on the left highlights automatically as this section comes into view.
Scroll this panel - the item on the left highlights automatically as this section comes into view.
Scroll this panel - the item on the left highlights automatically as this section comes into view.
Scroll this panel - the item on the left highlights automatically as this section comes into view.
Scroll this panel - the item on the left highlights 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 in the sidebar |
| items[].children | TocItem[] | undefined | Nested sub-sections, shown indented under this item |
| contentRef | RefObject<HTMLElement> | — | Ref to the container holding the sections being tracked |
| title | string | "On this page" | Small label shown above the list |
| accentColor | string | "#5C7CFE" | Accent color for the active item's indicator dot |
react-icons