How to build an accessible Toc in React

Rendered as a <nav> landmark with a label; entries are real anchor links and the active one is marked aria-current="location" so assistive tech announces the current section

When to use a Toc

• 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 it

• Top-level site navigation between pages — use NavigationMenu or SideNav
• Showing hierarchy depth of the current page — use Breadcrumb

Keyboard interactions

Role navigation, verified at WCAG 2.2-AA.

• Tab
• Enter

Common mistakes

Avoid: Using Toc as the primary site navigation between routes

Prefer: <NavigationMenu> / <SideNav> for cross-page navigation

Toc links to sections within the current document, not to other pages

Example

<Toc items={[{ id: 'intro', label: 'Introduction' }, { id: 'usage', label: 'Usage' }, { id: 'api', label: 'API', level: 3 }]} />

See the full Toc reference →