Table of Contents
The sections of a page as links, with the current one marked. On web it follows the scroll by itself.Basic
Preview
Code
The route
A loop of eleven kilometres from the village, along the river and back over the ridge.Where to start
Park by the old mill and follow the yellow markers past the bridge.Water and shelter
There is a spring at the halfway hut, which stays open from April to October.When to go
Late spring and early autumn, when the river is low enough to cross at the ford.Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { TableOfContents } from '@advui/core'
<TableOfContents
title="On this page"
items={[
{ id: 'install', label: 'Install', level: 2 },
{ id: 'provider', label: 'Set up the provider', level: 3 },
{ id: 'usage', label: 'Usage', level: 2 },
]}
/>API reference
TableOfContents
| Prop | Type | Default | Description |
|---|---|---|---|
items required | TableOfContentsItem[] | — | `{ id, label, level? }`: the id of the section’s heading, its text, and its heading level (2 for an h2). Deeper levels are indented. |
activeId | string | — | The current section. On web, leave it out to follow the scroll; the first item is current until then. |
onActiveIdChange | (id: string) => void | — | Called as the scroll reaches another section (web) or an item is pressed. |
onItemPress | (item: TableOfContentsItem) => void | — | Called when an item is pressed. Web follows the link to `#id` too; on iOS and Android, scroll to the section here. |
title | string | — | Visible heading above the links. |
label | string | 'On this page' | Accessible name of the navigation. Give each one on a page its own. |
headingOffset | number | 80 | Web: a heading counts as reached once its top is this many pixels below the top of the window, such as the height of a sticky header. |
currentLabel | string | 'current' | Added to the current item’s name on iOS and Android. |
Accessibility
- On web, a
navnamed bylabel, holding a list of links. The current one hasaria-current="location". - Once the page is scrolled to the end, the last section is current, as a short last section never reaches the top.
- On iOS and Android, which read no
aria-current, the current link’s name ends in “current”.
| Key | Action |
|---|---|
| Tab | Moves between the links. |
| Enter | Goes to the section. |
Platform notes
Web
Watches the window’s scroll. Each item’s
id must be the id of an element on the page, such as a Heading.iOS
There are no anchors: pass
activeId and scroll to the section in onItemPress.Android
There are no anchors: pass
activeId and scroll to the section in onItemPress.