Breadcrumbscomplementary
Breadcrumbs show hierarchy, TOC shows page sectionsTableOfContents
Sticky sidebar navigation for long-form content. Renders heading links with active state highlighting for scroll spy integration.
Setup
import { TableOfContents } from '@fragments-sdk/ui';Examples
Default
Basic table of contents with section links
Loading preview...
With Active Item
Active state highlighting the current section
Loading preview...
Custom Title
Table of contents with a custom title
Loading preview...
No Title
Table of contents without a visible title
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | TableOfContents.Item elements |
label | string | Table of contents | Accessible label for the nav landmark |
title | string | On This Page | Visible title above the list |
hideTitle | boolean | false | Hide the visible title |
Usage Guidelines
When to use
- Long-form content pages (docs, blog posts, articles)
- Component documentation with multiple sections
- Any page with 3+ headings that benefits from quick navigation
When not to use
- Short pages with only 1-2 sections
- Primary site navigation (use Sidebar or Header)
- Step-by-step flows (use Stepper)
Best practices
- Pair with a scroll spy hook (e.g., IntersectionObserver) to track active heading
- Use indent on sub-headings (h3) to show hierarchy
- Place in a sticky aside for best UX
- Heading IDs must match between TOC items and the actual DOM headings
- TableOfContents.Item performs smooth scrolling by default; call event.preventDefault() in onClick to override
Accessibility
- Uses <nav aria-label="Table of contents"> for landmark navigation
- Active item is marked with aria-current="location"
- All items are links with smooth scroll behavior
- Focus-visible ring on keyboard navigation