# Toc

In-page table of contents. Compose manual `Toc.Item`s or enable `auto` to scan headings in a content root.

## Examples

### Default

A flat list of section anchors with one selected item.

```tsx
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>
```

```astro
---
import { Toc, TocItem } from '@var-ui/astro';
---
<Toc title="On this page">
  <TocItem label="Examples" href="#examples" isSelected />
  <TocItem label="Props" href="#props" />
</Toc>
```

```html
<nav class="var-ui-toc" aria-label="On this page">…</nav>
```

### Nested items

Mark subsection links with `isNested` (matches auto mode’s `h3` indent).

```tsx
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>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| auto | boolean \| undefined | no |  | Scan a content root for `h2`/`h3` headings with ids. |
| children | ReactNode | no |  | Manual `Toc.Item` children. Omit when using `auto`. |
| className | string \| undefined | no |  |  |
| contentSelector | string \| undefined | no |  |  |
| headerOffset | number \| undefined | no |  |  |
| headingSelector | string \| undefined | no |  |  |
| hideBelowXl | boolean \| undefined | no | false | Hide the nav below the `xl` breakpoint. |
| label | string \| undefined | no | title or 'On this page' | Accessible name for the nav landmark. |
| minHeadings | number \| undefined | no |  |  |
| stickyTop | string \| undefined | no |  | Sets `--var-ui-toc-sticky-top` on the root. |
| title | ReactNode | no | 'On this page' | Visible section label above the list. |

## Accessibility

The root is a `nav` landmark. Selected items set `aria-current="location"`. Prefer stable heading `id`s so `href="#…"` targets resolve.