Navigation
Table of Contents
An "On this page" list of anchors that tracks the section in view.
This list points at the sections of this page. Scroll and the active entry follows the section in view; select an entry to jump to it. The links are ordinary anchors, so they work before JavaScript loads and update the address bar.
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add table-of-contentsWrites components/ui/table-of-contents.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { TableOfContents } from "@/components/ui/table-of-contents";API reference
Props and composition points for Table of Contents. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
items | { id: string; title: ReactNode; depth?: 1 | 2 | 3 }[] | None | One entry per heading, using the heading's id. Required. An empty list renders nothing. |
title | ReactNode | "On this page" | The visible heading of the list. It also names the navigation landmark. |
offset | number | 96 | Pixels from the top of the viewport where a heading counts as reached. Match your sticky header. |
trackActive | boolean | true | Follow the section in view. Turn it off for a static list. |
Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- It is a nav landmark named by its visible title, with a list of ordinary anchor links.
- The active entry has aria-current=location, and a brand left border as well as colour.
- Links work before JavaScript loads and update the URL hash, so they can be shared.
- Give each heading scroll-margin-top so it is not hidden under a sticky header after the jump.
Used in production
The Aback products whose interfaces shaped this component.