# TableOfContents
> The sections of a long page as in-page links in a named nav; one level of nesting and a current marker.
URL: https://apogee.avaui.dev/docs/table-of-contents
Last updated: 2026-10-15
The sections of a long page as in-page links in a named nav; one level of nesting and a current marker.
Last updated October 15, 2026
```astro
```
## Add
```sh
npx @ava-ui/apogee add table-of-contents
```
No dependencies. Zero JS.
## Usage
Build the items from your headings (Astro’s `render()` returns them):
```astro
---
import TableOfContents from '@/components/apogee/TableOfContents/TableOfContents.astro'
const { headings } = await render(entry)
const items = headings.filter((h) => h.depth === 2).map((h) => ({ label: h.text, href: `#${h.slug}` }))
---
```
## API
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `{ label, href, children? }[]` | — | Required. `children` nest one level. |
| `label` | `string` | `'Table of contents'` | The visible heading and the nav’s name. |
| `current` | `string` | — | `href` of the section to mark as current (`aria-current="location"`). |
| `class` | `string` | — | Extra classes on the `