Overview

The Table of Contents (TOC) components provide in-page navigation based on the headings in your content. There are two implementations — one for desktop and one for mobile.

Look at the right sidebar (on desktop) — the TOC for this page is generated from these headings.

Desktop TableOfContents

Renders in the right sidebar on large screens. Shows a nested list of heading links.

Features

• Sticky positioning in the right sidebar
• Nested list reflecting heading hierarchy
• Generated from h2 and h3 headings by default
• Hidden on mobile and in print

Mobile TableOfContents

Renders as a collapsible <details> element above the content on mobile screens.

Features

• Collapsed by default
• Shows "On this page" as the summary
• Caret icon indicates expand/collapse state
• Hidden on large screens (lg:sl-hidden)

Configuration

Frontmatter Override

Override TOC settings per-page:

---
tableOfContents:
  minHeadingLevel: 2
  maxHeadingLevel: 4
---

Global Defaults

The route loader sets defaults:

const tocItems = generateToc(page.headings, {
  minHeadingLevel: 2,
  maxHeadingLevel: 3,
  title: page.frontmatter.title,
});

TocItem Interface

interface TocItem {
  depth: number;      // Heading level (2-6)
  slug: string;       // Anchor ID
  text: string;       // Heading text
  children: TocItem[]; // Nested headings
}

TocConfig Interface

interface TocConfig {
  minHeadingLevel: number;  // Minimum heading level to include
  maxHeadingLevel: number;  // Maximum heading level to include
  items: TocItem[];         // Generated TOC tree
}

How Headings Become TOC Items

1. The remarkHeadings remark plugin extracts headings during MDX compilation
2. Each heading gets an auto-generated id slug
3. generateToc() filters headings by configured level range
4. Headings are structured into a tree based on depth
5. The AnchorHeading component renders each heading with a clickable anchor link

Heading Levels Demo

The headings below demonstrate different levels appearing in the TOC:

This is an h3

Content under h3.

Another h3

More content.