Table of Contents Demo Page
Use this page to test the Table of Contents component. It includes multiple heading levels, long text, lists, a quote, and a code block.
Overview
Table of Contents finds headings on the page and turns them into clickable anchor links. It also tracks the active section while you scroll.
Good for docs pages, long landing pages, blog posts, and help centers.
How it works
It scans headings
The component looks for headings using a selector like h2 or h3, then builds a list in the same order they appear on the page.
It creates anchor links
Each item links to a section on the page, using the heading text as the label.
It highlights the active section
As you scroll, it updates the active item so readers always know where they are.
What to test
Smooth scrolling
Click a TOC item and confirm it scrolls smoothly to the right section.
Try:
• Clicking an item far below
• Clicking an item slightly below
• Clicking the same item again
Scroll lock behavior
When you click an item, the TOC should jump to that target immediately. It should not highlight every section in between while scrolling.
If you see the active highlight walking through headings while scrolling, the scroll lock is not working as intended.
Suggested settings
Selector and offset
Try these combinations:
• Selector: h2, Offset: 0
• Selector: h2, Offset: 70
• Selector: h3, Offset: 70
• Selector: h3, Offset: 120
If you have a sticky header, increase the offset so the heading does not hide under it.
Layout spacing
Try changing these values and confirm they apply exactly:
• Padding: 4px, 12px, 0
• Item padding: 4px, 10px, 0
• Gap: 4, 8, 0
Content tests
Long paragraph
This is a longer paragraph to test wrapping and line height. The goal is to make sure the component remains readable and stable even when the content is dense. A TOC should feel calm and predictable, not jumpy or distracting. If you use a sticky header, verify that the scroll offset lands the heading in the right place.
Here is a second paragraph to test vertical rhythm. Check that spacing between paragraphs feels consistent and that the TOC active state updates at the right times.
Bullets
• Short bullet item
• A longer bullet item that wraps onto the next line so you can test multi-line layout
• A bullet with bold and italic emphasis together
Steps
1. Add the Table of Contents component to the page
2. Choose a selector like h3
3. Paste this markdown into a page section
4. Preview the site
5. Scroll and click around to verify active highlighting
Quote
Good navigation should feel invisible until you need it.
Code block
1: Overview Section
2: How it works Section
3: What to test Section
4: Content tests Section
5: FAQ