Table of Content (TOC)
Generates a linked table of contents from the page's own headings, with an optional collapsible toggle and progress dots tracking scroll position.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
title | string | "Table of content" | Heading shown above the list. |
maxLevel | select | "h2" | Deepest heading level included in the list. |
offset | string | "40" | Scroll offset (px) used when jumping to a heading, e.g. to clear a sticky header. |
identifier | string | — | Used to scope which headings on the page get picked up. |
showDots | boolean | true | Shows progress dots next to each entry. |
showToggle | boolean | true | Makes the whole list collapsible. |
| (Toggle options) | condition | shown when showToggle is on | |
toggle.expanded | boolean | true | Whether the list starts expanded. |
toggle.openText | string | "Open" | Label shown on the toggle when collapsed. |
toggle.closeText | string | "Close" | Label shown on the toggle when expanded. |
Note
This page covers the component's current props. A full walkthrough — like the one on Accordion — is coming as this component gets re-verified in an active conversion.