TableOfContents
An "On this page" rail that marks the section being read.
- Use it for
- An "On this page" rail for long documents.
- Not for
- Short pages with two or three sections. Try Tabs.
TableOfContents preview
Loading example…
Installation
npm install @stackunseen/uiimport { TableOfContents } from '@stackunseen/ui/navigation';@stackunseen/ui/styles.css and @stackunseen/ui/navigation.cssUsage and props
Import this component from @stackunseen/ui/navigation. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/navigation.css.
Links are plain in-page anchors; nothing hijacks scrolling. The active heading is the last one past the reading line, tracked with an IntersectionObserver and a passive scroll listener. Track lists every level on a line that steps in per level and darkens for the sections on screen. Ticks is a slim rail for long reads that opens into the titles. Below minItems it renders nothing.
Supported inputs
This is the public signature used by this example. Open Code to see how the values and callbacks fit together.
items: { id, title, items? }[] · variant?: list | track | ticks · label? · numbered? · showReading? · collapsible?: narrow | never | always · readingLine? · minItems? · activeId? · onActiveChange? · useActiveHeading(ids)All props
Loading…
For your coding agent
Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.
- Contract
- items: { id, title, items? }[] · variant?: list | track | ticks · label? · numbered? · showReading? · collapsible?: narrow | never | always · readingLine? · minItems? · activeId? · onActiveChange? · useActiveHeading(ids)
- Keeps honest
- Links are plain in-page anchors; nothing hijacks scrolling. The active heading is the last one past the reading line, tracked with an IntersectionObserver and a passive scroll listener. Track lists every level on a line that steps in per level and darkens for the sections on screen. Ticks is a slim rail for long reads that opens into the titles. Below minItems it renders nothing.
- MCP
read_component "TableOfContents"on the docs endpoint
Keyboard and customization
Keyboard
Ordinary links in a navigation landmark; the active one carries aria-current="location". The ticks rail is a button with aria-expanded; focus inside opens the titles and Escape closes them.
Customization
Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio