# Table of Contents (/docs/table-of-contents)

A navigable heading outline that tracks the active document section.

## Install

```bash
npx shadcn@latest add https://4af.selfsimilar.dev/r/table-of-contents.json
```

## Usage

```tsx
import { TableOfContents } from "@/components/ui/table-of-contents";

<TableOfContents
  items={headings}
  rootRef={articleRef}
  className="max-h-80"
/>
```

## API

**Main export:** `TableOfContents`

Heading navigation with a dashed rail and an active marker. `variant="span"` (default) marks
every visible heading; `variant="single"` marks one. Clicking an entry scrolls the document
smoothly. When no heading is on screen, the last heading scrolled past stays active.

Give it a height and it scrolls on its own, without a visible scrollbar, keeping the active entry
centred.

`labels="hover"` hides the headings until the list is hovered or keyboard-focused, leaving the
rail and marker; `always` (default) shows them. The rail geometry is the same either way. On touch
screens the headings always show.

`rootRef` is the document's scroll root. Pass it when the article scrolls inside a container
rather than the page.