
export default function Example() {
  return (
    <TableOfContents>
      <TableOfContents.Title>On this page</TableOfContents.Title>
      <TableOfContents.List>
        <TableOfContents.Item href="#intro" active>
          Introduction
        </TableOfContents.Item>
        <TableOfContents.Item href="#api">API Reference</TableOfContents.Item>
      </TableOfContents.List>
    </TableOfContents>
  );
}

This component is purely presentational. All interaction logic — scroll tracking, IntersectionObserver, active state management — is left to the consumer.

Examples

Interactive

Click an item to set it as active. The consumer controls state via active and onClick.

No active item

When no item has active set, all items show the default subtle text style with a hover indicator.

Groups

Use TableOfContents.Group to organize items into labeled sections with indented children. Groups support two modes: pass an href to make the group label a clickable link (like "Examples" and "API" below), or omit it for a plain non-interactive title (like "Getting Started").

Without title

The title sub-component is optional — use TableOfContents.List directly if you don't need a heading.

Custom element

Use the render prop to swap the default anchor for a button, router link, or any element.

React Router

<TableOfContents.Item render={<Link to="/intro" />} active>
  Introduction
</TableOfContents.Item>

Next.js


<TableOfContents.Item render={<Link href="/intro" />} active>
  Introduction
</TableOfContents.Item>;

Button (no navigation)

<TableOfContents.Item render={<button type="button" />} onClick={handleClick}>
  Introduction
</TableOfContents.Item>

API Reference

`TableOfContents`

Root nav container with a default aria-label of "Table of contents".

Props table: TableOfContents

`TableOfContents.Title`

Optional uppercase heading displayed above the list (renders a <p>).

Props table: TableOfContents.Title

`TableOfContents.List`

List container with a left border rail.

Props table: TableOfContents.List

`TableOfContents.Item`

Individual navigation link. Set active for the current section. Use the render prop to swap the anchor for a router link or button.

Props table: TableOfContents.Item

`TableOfContents.Group`

Groups items under a labeled section with indented children. Pass href to make the label a clickable link, or omit for a plain title.

Props table: TableOfContents.Group

Kumo