On This Page
Add the component to a page, set the target property, then a list of links will be auto-generated based on HTML headings.
How It Works
The following props are critical to how this operates.
||"#page"||Query selector for the scrollable page element.|
||"#page"||Query selector for the element to scan for headings.|
||'h2, h3'||Query selector for the allowed headings. From H2-H6.|
The component will scan the target region and query all matching headings. If a heading has an
ID set, that
will be used as the scroll target, otherwise an ID will be auto-generated and assigned.
Click to Scroll
scrollIntoView method. This will smoothly scroll the container element to the heading with the matching ID.
Ignore a Heading
By default, the Table of Contents creates links for all headings within the target region. If you wish to ignore certain headings, add the following data attribute to that heading.
<h2 class="h2" data-toc-ignore>Ignore Me!</h2>
Screen Reader Headings
If you wish to include a section link that's not visibly shown within the target element, use Screen Reader
.sr-only class from Tailwind.
<h2 class="sr-only">Include Me!</h2>
See Tailwind's documentation on sticky positioning if you wish to keep the Table of Contents component visible during scrolling.