Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn in-page table of contents built from heading levels, which marks the section being read as you scroll. Use this when a long page needs a nested outline that follows the reader.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for documentation pages, articles and long settings pages with more than a handful of headings.
Do not use it for short pages (there is nothing to scroll) or when the headings do not have ids.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
headings | Heading[] | - | { id, text, level } in page order. |
activeId | string | - | Controls the active heading. Omit to follow the scroll. |
onActiveChange | (id) => void | - | The active heading changed. |
aria-label | string | "On this page" | Names the landmark. |
nav landmark; the heading being read has aria-current="page".scrollIntoView, instant when the person prefers reduced motion.The pattern ships with a Testing Library test (table-of-contents-tree.test.tsx) that covers nesting by level, the links and the active marker.