Toc
In-page table of contents. Compose manual Toc.Items or enable auto to scan headings in a content root.
Examples
Default
A flat list of section anchors with one selected item.
Demo.tsxtsx
import { Toc } from '@var-ui/react';
<Toc title="On this page">
<Toc.Item label="Examples" href="#examples" isSelected />
<Toc.Item label="Props" href="#props" />
</Toc>Nested items
Mark subsection links with isNested (matches auto mode’s h3 indent).
Demo.tsxtsx
import { Toc } from '@var-ui/react';
<Toc title="On this page">
<Toc.Item label="Examples" href="#examples" isSelected />
<Toc.Item label="Default" href="#default" isNested />
<Toc.Item label="Nested items" href="#nested" isNested />
<Toc.Item label="Props" href="#props" />
<Toc.Item label="Accessibility" href="#accessibility" />
</Toc>Props
Accessibility
The root is a nav landmark. Selected items set aria-current="location". Prefer stable heading ids so href="#…" targets resolve.