Table of Contents Layout DemoLink to section
This page demonstrates the MarkdownLayout with table of contents enabled. Look to the right to see the automatically generated navigation!
IntroductionLink to section
The table of contents provides quick navigation through long documents. It tracks your scroll position and highlights the current section.
Automatic GenerationLink to section
The ToC is automatically generated from your markdown headings. It supports hierarchical structure and is fully responsive.
Scroll TrackingLink to section
As you scroll through this page, notice how the table of contents updates to show your current position. This uses the IntersectionObserver API for smooth performance.
ConfigurationLink to section
Enable the table of contents by adding to your frontmatter:
---tableOfContents: true---Heading LevelsLink to section
By default, the ToC includes headings from level 2 to 3. This can be configured in the component.
Responsive BehaviorLink to section
On smaller screens (below xl breakpoint), the ToC is hidden to prioritize content readability.
Long Content SectionLink to section
This section contains more content to demonstrate scrolling behavior.
Subsection OneLink to section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Subsection TwoLink to section
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Subsection ThreeLink to section
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
Best PracticesLink to section
When to Use ToCLink to section
- Documentation with multiple sections
- Long-form articles
- Tutorial content
- Reference materials
When to Skip ToCLink to section
- Short pages (less than 3 sections)
- Landing pages
- Simple announcements
Advanced FeaturesLink to section
The table of contents component is based on Starlight’s implementation, providing:
- Smooth scroll behavior
- Active section highlighting
- Keyboard navigation support
- ARIA labels for accessibility