Navigation
A small floating dock that expands into labels on hover, for pages with no room for a sidebar
Scroll this panel - the dot on the bottom-right highlights automatically as this section comes into view.
Scroll this panel - the dot on the bottom-right highlights automatically as this section comes into view.
Scroll this panel - the dot on the bottom-right highlights automatically as this section comes into view.
Scroll this panel - the dot on the bottom-right highlights automatically as this section comes into view.
Scroll this panel - the dot on the bottom-right 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 when the dock is expanded |
| contentRef | RefObject<HTMLElement> | — | Ref to the container holding the sections being tracked |
| accentColor | string | "#5C7CFE" | Accent color for the active section's dot |