TableOfContents

Pass the headings as a tree of { id, label, children? }. The contents here point at this page’s own headings; scroll, and the current one moves.

<TableOfContents
  items={[
    { id: 'import', label: 'Import' },
    {
      id: 'usage',
      label: 'Usage',
      children: [{ id: 'active', label: 'How the current heading is chosen' }],
    },
    { id: 'props', label: 'Props' },
  ]}
/>

Each heading’s scroll-margin-block-start is the reading line, and the last heading to pass it is the current one. Give the headings the scroll margin your sticky header needs, and a heading reached from the contents becomes current. At the end of the document the last heading is current even if its section is short. In a vertical document it reads from right to left (vertical-rl) or left to right (vertical-lr).

items

Type: readonly TableOfContentsItem[]

Default: -

label?

Type: string

Default: -

Type base (some attrs are managed internally): HTMLAttributes<HTMLElement>

Wording this component renders (labels, placeholders, and the like) comes from the message dictionary when no prop sets it. To change it, see: i18n