Navigation
A horizontal row of "jump to section" chips placed at the top of the article, the same anchor-link pattern as a recipe site's "Jump to Recipe" button
Scroll this panel - the chip above highlights automatically as this section comes into view.
Scroll this panel - the chip above highlights automatically as this section comes into view.
Scroll this panel - the chip above highlights automatically as this section comes into view.
Scroll this panel - the chip above highlights automatically as this section comes into view.
Scroll this panel - the chip above 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 on this chip |
| contentRef | RefObject<HTMLElement> | — | Ref to the container holding the sections being tracked |
| accentColor | string | "#5C7CFE" | Accent color for the active chip |