DocsTableOfContents

The DocsTableOfContents component automatically generates a table of contents from the headings in your documentation page and highlights the currently visible section.

Usage

Copy<script setup lang="ts">
import { DocsTableOfContents } from '@/components/DocsTableOfContents'
import type { Toc } from '@nuxt/content'

const toc: Toc = {
  title: "Page Title",
  depth: 1,
  searchDepth: 3,
  links: [
    {
      id: "heading-1",
      depth: 2,
      text: "Heading 1",
      children: [
        {
          id: "heading-1-1",
          depth: 3,
          text: "Subheading 1.1",
        },
      ],
    },
  ],
}
</script>

<template>
  <DocsTableOfContents :toc="toc" />
</template>

Variants

The component supports two display variants:

List Variant (Default)

Displays as a vertical list on the side:

Copy<template>
  <DocsTableOfContents :toc="toc" variant="list" />
</template>

Dropdown Variant

Displays as a dropdown button on mobile:

Copy<template>
  <DocsTableOfContents :toc="toc" variant="dropdown" />
</template>

Features

Active Section Highlighting

The component automatically highlights the currently visible section using IntersectionObserver:

• Monitors all heading elements on the page
• Updates active state as user scrolls
• Uses rootMargin: "0% 0% -80% 0%" for accurate detection

Flattened Structure

The component flattens the TOC structure to show all headings in a single list:

• Main headings (h2)
• Direct children (h3, h4) shown inline
• Proper indentation based on depth

Smooth Scrolling

Clicking a TOC item smoothly scrolls to the corresponding heading using anchor links.

API Reference

DocsTableOfContents

Toc

TocLink

Customization

Styling

The component uses Tailwind classes for styling:

• Different padding for different depths (data-[depth=3]:pl-4)
• Active state styling (data-[active=true]:text-foreground)
• Hover effects
• Responsive visibility

Intersection Observer

The component uses VueUse's useIntersectionObserver to track visible headings. You can customize the rootMargin in the component if needed.