Table of Contents

A dynamic, interactive table of contents component that automatically generates navigation from your page headings. Perfect for long-form content, documentation, and articles that need clear structure and easy navigation.

Key Features

• Auto-highlighting: Current section is highlighted during scroll

• Smooth Scrolling: Click navigation with smooth transitions

• Responsive Design: Adapts to different screen sizes

• Accessibility: Semantic markup with ARIA support

Quick Start

1
---
2
const headings = await getHeadings(); // Get from your content
3
---
4

5
<TOC {headings} depth={3} title="On This Page" />

Features & Options

Heading Depth Control

Choose how deep your table of contents should go (1-6 levels):

1
---
2
<TOC
3
      headings={[
4
        { depth: 1, slug: '#example-1', text: 'H1 Heading' },
5
        { depth: 2, slug: '#example-2', text: 'H2 Heading' },
6
        { depth: 3, slug: '#example-3', text: 'H3 Heading' },
7
      ]}
8
      depth={3}
9
      title="Three Levels Deep"
10
    />

Progress Bar

Track reading progress with an optional progress bar:

The progress bar can track either:

• Overall page scroll progress
• Specific content section progress using the contentSelector prop

Content Section Tracking

Specify a content section to track:

1
<TOC
2
    headings={headings}
3
    contentSelector=".article-content"
4
    progressBar={true}
5
/>

This is useful when you want the TOC to track a specific content area rather than the entire page.

Alignment Options

Position your TOC to match your layout:

TOC Component Props API

Using with Content Collections

1
---
2
export async function getStaticPaths() {
3
  const posts = (await getCollection('docs')).map((post) => {
4
      return {
5
        params: { slug: post.slug },
6
        props: { post },
7
      };
8
    });
9
    return posts;
10
}
11

12
const { post } = Astro.props;
13

14
const { Content, headings } = await post.render();
15

16
---
17

18
<TOC headings={headings} depth={3} title="On This Page" />

Common Use Cases