Components / core

TableOfContents

Scrollspy Rail - Zero-Padded Index, Active Section In Amber

01 Preview

02 Usage

Scrollspy table of contents - a vertical rail of section links, each with a zero-padded index, highlighting the section currently in view.

<TableOfContents
  items={[
    { id: 'overview', label: 'Overview' },
    { id: 'install', label: 'Install' },
    { id: 'tokens', label: 'Tokens' },
    { id: 'api', label: 'API' },
  ]}
/>

Uncontrolled by default: it observes each document.getElementById(id) with IntersectionObserver and lights the topmost visible section. Pass activeId to control it yourself, onActivate to hook clicks. Each id must match a real target element. Labels render uppercase; keep them short.

03 Props

Prop	Type	Default	Notes
items	`TableOfContentsItem[]`	`[]`	Sections to list, in document order.
onActivate	`(id: string) => void`	—	Called with an item's id when its link is clicked.
aria-label	`string`	`Table`	Accessible name for the nav landmark. of contents"

Also accepts every attribute of Omit<React.HTMLAttributes<HTMLElement>, 'onScroll'> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 TableOfContentsItem

Prop	Type	Default	Notes
id*	`string`	—	Target element id, used as the link hash (`#id`) and the observed section.
label*	`React.ReactNode`	—	Rendered link text.

05 Import

import { TableOfContents } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';