# TableOfContents

An "On this page" rail that marks the section being read.

- **Use it for**: An "On this page" rail for long documents.
- **Not for**: Short pages with two or three sections. Try [Tabs](https://unseenui.com/components/tabs/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { TableOfContents } from '@stackunseen/ui/navigation';
import '@stackunseen/ui/styles.css';
import '@stackunseen/ui/navigation.css';

<TableOfContents items={outline} numbered showReading />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `activeId` | `string \| null` | Control the active heading instead of tracking scroll; null means none. |
| `collapsible` | `"narrow" \| "never" \| "always"` | A Show/Hide toggle: on small screens only, never, or always. |
| `headingLevel` | `3 \| 2 \| 4` |  |
| `items` (required) | `readonly TocItem[]` |  |
| `label` | `string` | Names the landmark and heads the rail. |
| `minItems` | `number` | Below this many top-level items the rail renders nothing. |
| `numbered` | `boolean` | Prints "01", "02", … before each top-level title, like drawing callouts. |
| `onActiveChange` | `((id: string \| null) => void)` |  |
| `readingLine` | `number` | The reading line as a fraction of the viewport height. |
| `showReading` | `boolean` | Prints "3 / 7" for the section being read. |
| `variant` | `"track" \| "list" \| "ticks"` | `list`: titles on a hairline rail. |

## Keyboard

Ordinary links in a navigation landmark; the active one carries aria-current="location". The ticks rail is a button with aria-expanded; focus inside opens the titles and Escape closes them.

## Works with

[CommandPalette](https://unseenui.com/components/command-palette/), [Breadcrumb](https://unseenui.com/components/breadcrumb/), [Tabs](https://unseenui.com/components/tabs/), [Stepper](https://unseenui.com/components/stepper/), [Pagination](https://unseenui.com/components/pagination/), [DropdownMenu](https://unseenui.com/components/dropdown-menu/), [ContextMenu](https://unseenui.com/components/context-menu/), [NavigationMenu](https://unseenui.com/components/navigation-menu/), [Sidebar](https://unseenui.com/components/sidebar/), [ShareMenu](https://unseenui.com/components/share-menu/)

Page: https://unseenui.com/components/table-of-contents/