Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProBuilds a table of contents from the h2 and h3 headings inside an element, adds missing ids, marks the heading in view and scrolls on click.
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 beside any article or docs page rendered from Markdown or a CMS, where the headings are not known ahead of time.
Do not use it when: the headings are known at build time (render a static list instead).
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 |
|---|---|---|---|
target | RefObject<HTMLElement> | required | The element whose headings are listed. |
title | string | "On this page" | The navigation's accessible name. |
A nav with an accessible name; the entries are links to the headings; the one in view carries aria-current="location". Level-3 entries are indented but the list is flat, so nothing is hidden from a screen reader.
The pattern ships with a test (table-of-contents-from-headings.test.tsx). It covers the listing, id generation and preserved ids.