Table Of Contents
Scrollspy on-this-page nav with an animated active indicator.
Import
tsx
import { TableOfContents } from "@cooud-ui/ui";
bash
npx cooud-ui add table-of-contents
Examples
API Reference
Generated from the component's exported types.
TableOfContentsProps
Extends Omit<HTMLAttributes<HTMLElement>, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
items | TableOfContentsItem[] | — | The entries to render, in document order. When omitted, headings are auto-discovered from the DOM via . |
selector | string | DEFAULT_SELECTOR | CSS selector used to auto-discover headings when is omitted. Only elements with an `id` participate; depth is derived from the heading level (the shallowest level found becomes depth 0). Defaults to `"h2, h3"`. |
containerId | string | — | `id` of the element that scopes heading discovery. When that element is itself a scroll container (`overflow-y: auto | scroll`), it also becomes the scrollspy root and the target of click-to-scroll — otherwise the window scrolls. Defaults to the whole document. |
offset | number | 0 | Pixels between the top of the scroll root and the activation line — match your sticky-header height. Also subtracted when scrolling to a section on click. Defaults to `0`. |