TableOfContents
Markdown for agentsSticky 'On this page' navigation with nested levels and aria-current, plus a useScrollSpy hook for the active heading.
npx slipstream-ui@latest add table-of-contentsArticle TOC (interactive)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| headings | TocHeading[] | required | Headings: { id, text, level: 2 | 3 | 4 }. |
| activeId | string | — | Controlled active heading (pair with useScrollSpy). |
| label | string | 'On this page' | Accessible name of the nav landmark. |
| sticky | boolean | true | Stick while the article scrolls. |
| useScrollSpy(ids) | hook | — | Active heading id from scroll position (IntersectionObserver). |
Accessibility
- nav landmark with a label; the active link carries aria-current="location".
- Nested levels are indented; DOM order matches document order.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.