Auto Table of Contents

This component automatically scans your page content for heading elements and builds a dynamic table of contents without requiring manual input.

Demo

See the Auto Table of Contents component in action.

Installation

pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/auto-toc.json

Features

The Auto-Generating Table of Contents component includes several powerful features:

Automatically detects headings in your content
Creates a hierarchical navigation structure
Highlights the currently active section
Provides smooth scrolling to sections
Fully responsive design with Tailwind CSS
Accessible with proper ARIA attributes

Usage

Using this component in your React application is straightforward:

Basic Implementation

auto-toc-basic.tsx

import { AutoTableOfContents } from "@/components/ui/auto-toc"

export default function AutoTOCBasic() {
  return (
    <div className="flex">
      <AutoTableOfContents />
      <main>
        <h1 id="heading-1">Heading 1</h1>
        {/* Your content here */}
      </main>
    </div>
  )
}

Accessibility

This component follows accessibility best practices:

Uses semantic HTML elements
Includes proper ARIA attributes
Supports keyboard navigation
Maintains focus management

Browser Support

This component uses the Intersection Observer API, which is supported in all modern browsers. For older browsers, you may need to include a polyfill.

AutoToc Props

Prop	Type	Default
containerSelector	`string`	`"main"`
title	`string`	`"Table of Contents"`
maxDepth	`number`	`3`
minHeadings	`number`	`2`
className	`string`	—
autoGenerateIds	`boolean`	`false`
offset	`number`	`100`