TableOfContents
A scroll-spy navigation sidebar that scans a content container for h2/h3 headings and links to each one, bolding whichever section is currently in view.
Installation
npx dafink-ui add table-of-contentsDemo
Overview
A short introduction to the section.
Getting started
Steps to get up and running.
Advanced usage
Additional configuration options.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| containerId | string | 'docs-content' | The id of the element to scan for h2/h3 headings. |
| label | string | "What's on this page?" | Heading text rendered above the list of links. |
| className | string | '' | Additional classes applied to the wrapping nav element. |
Accessibility
TableOfContents has no composite keyboard handling: it renders a list of native anchor links reached and left via normal Tab order, with no arrow-key navigation between entries. It is a nav element labeled aria-label="Table of contents", and the section currently in view is communicated both visually (bold text) and via aria-current="location" on its link, not by color alone. Links are real href="#..." targets, so they stay usable even if JavaScript fails to intercept the click.