Overview
A table of contents gives readers a quick map of a long page. Follow a heading to jump directly to its section, or keep reading and let the current position update as you scroll.
Installation
Import the client entry to enable scroll tracking and pointer interaction. The native button and heading links are already usable before the page finishes loading.
Configuration
Match every line and link to a unique heading ID. Choose a scroll container and a content boundary when the article lives inside another page.
Examples
Hover a line to see its heading in the contents list. Click the line to jump there. On a touch screen, open the list and select the heading you want to read.
Accessibility
The contents are ordinary navigation links. Use the keyboard to open the list, move through its headings, and dismiss it with Escape. Scrolling never moves keyboard focus.
Styling
Adjust line length, spacing and the panel width with CSS variables. The current section uses bolder text; the heading under the pointer gets a separate hover background.
Conclusion
The same component works beside a document or inside a reader. Its compact rail stays available while the article scrolls, without taking a separate content column.