Toc
Table of contents with scroll-spy highlighting of the active section
Category: navigation · WCAG 2.2-AA · toc, table-of-contents, navigation, scroll-spy, anchor
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { id: string; label: string; level?: number }[] | — | The items to render. |
activeId | string | — | Controlled active item id; disables built-in scroll-spy when set |
onActiveChange | (id: string) => void | — | Called with the id of the active section when it changes. |
labels | { nav?: string } | — | Overrides for the component’s user-visible strings (i18n). |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-font-sans--cascivo-color-text--cascivo-color-text-muted--cascivo-color-accent--cascivo-focus-ring--cascivo-target-min-coarse
When to use
- Long-form pages (docs, articles) that benefit from in-page jump links
- Highlighting which section is currently in view as the reader scrolls
When not to use
- Top-level site navigation between pages — use NavigationMenu or SideNav
- Showing hierarchy depth of the current page — use Breadcrumb
How to build an accessible Toc in React →
Examples
Basic
<Toc items={[{ id: 'intro', label: 'Introduction' }, { id: 'usage', label: 'Usage' }, { id: 'api', label: 'API', level: 3 }]} />Controlled active item
Pass activeId to drive the highlight yourself; scroll-spy is disabled.
<Toc activeId="usage" items={[{ id: 'intro', label: 'Introduction' }, { id: 'usage', label: 'Usage' }]} />Related components
- SideNav — SideNav navigates between pages; Toc navigates within one page
- Breadcrumb — Breadcrumb shows ancestor hierarchy; Toc shows in-page sections