# Table of contents

> On-this-page list that highlights the current section, with a gliding marker and progress ring.

Component · Pro · https://lodeui.com/components/table-of-contents

## When to use

- Long docs, articles and settings pages.

## When not to use

- Short pages with two or three sections.

## Installation

```bash
npx shadcn@latest add @lode/table-of-contents
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

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

<TableOfContents items={[{ id: "install", title: "Installation" }, { id: "cli", title: "CLI", level: 3 }]} />
```

## API reference

### TableOfContents

Links to headings by id; tracks which one you're reading.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ id; title; level?: 2 \| 3 }[]` | – | Heading ids on the page. |
| container | `RefObject<HTMLElement>` | – | Scrollable element; omit for the page. |
| offset | `number` | `96` | Height of your sticky header. |
| title | `string` | `"On this page"` | Heading text. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between links |
| Enter | Jump to the section |

## Accessibility

- A labelled nav; the current link has aria-current="location".
- Jumping moves focus to the heading, so screen readers continue from there.
- Smooth scrolling is skipped under reduced motion.

## Motion

- The marker glides to the current section; the ring fills with progress.

## Responsive behavior

- Hide it below your sidebar breakpoint.

## Performance

- A passive scroll listener; no per-frame layout reads beyond heading positions.

## Notes for AI

- Give headings tabIndex={-1} so focus can land on them.

## Related

- [Scroll progress](https://lodeui.com/components/scroll-progress) — A reading progress bar that springs with the page or any scroll container.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Help center](https://lodeui.com/blocks/help-center) — Help center with instant search, topics, article reader and feedback.