Prop	Type	Default	Description
`items`	`{ id: string; title: string; level?: number }[]`	-	Links to show. Leave out to collect headings automatically.
`headingsFrom`	`RefObject<HTMLElement \| null>`	`<main>`	Where to look for headings when `items` is not given. Falls back to the whole page.
`levels`	`number[]`	`[2, 3]`	Heading levels to collect.
`title`	`string`	`"On this page"`	Title above the list and accessible name of the `<nav>`.
`offset`	`number`	`96`	Pixels reserved at the top for a sticky header; also where a section counts as reached.
`container`	`RefObject<HTMLElement \| null>`	-	Scrollable element to watch and scroll instead of the page.
`onNavigate`	`(id: string) => void`	-	Called after the reader chooses a link.

Also accepts all <nav> props except children.

Notes

Collected headings without an id get one generated from their text. Give headings unique ids yourself if the page has repeated titles.
The current link gets aria-current="location". Nested levels are indented with logical padding, so the list works in RTL.
Renders nothing until it has at least one item.

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/table-of-contents.json

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

<TableOfContents className="sticky top-24" />

Prop	Type	Default	Description
`items`	`{ id: string; title: string; level?: number }[]`	-	Links to show. Leave out to collect headings automatically.
`headingsFrom`	`RefObject<HTMLElement \| null>`	`<main>`	Where to look for headings when `items` is not given. Falls back to the whole page.
`levels`	`number[]`	`[2, 3]`	Heading levels to collect.
`title`	`string`	`"On this page"`	Title above the list and accessible name of the `<nav>`.
`offset`	`number`	`96`	Pixels reserved at the top for a sticky header; also where a section counts as reached.
`container`	`RefObject<HTMLElement \| null>`	-	Scrollable element to watch and scroll instead of the page.
`onNavigate`	`(id: string) => void`	-	Called after the reader chooses a link.

Also accepts all <nav> props except children.

Collected headings without an id get one generated from their text. Give headings unique ids yourself if the page has repeated titles.
The current link gets aria-current="location". Nested levels are indented with logical padding, so the list works in RTL.
Renders nothing until it has at least one item.