Mischief

11 / Docs

Table of Contents

An outline of the page that keeps up with the reader, marking the section they are in as they scroll.

Live previewSource

Install

Scroll this panel to watch the outline keep up. Sections here are deliberately uneven, which is what makes the tracking worth doing properly.

The outline marks whichever heading was passed most recently.

Usage

Scroll this panel to watch the outline keep up. Sections here are deliberately uneven, which is what makes the tracking worth doing properly.

The outline marks whichever heading was passed most recently.

API

Scroll this panel to watch the outline keep up. Sections here are deliberately uneven, which is what makes the tracking worth doing properly.

The outline marks whichever heading was passed most recently.

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/table-of-contents
import { TableOfContents } from "mischief-ui/table-of-contents"

Usage

const sections = [
  { id: "install", label: "Install" },
  { id: "usage", label: "Usage" },
]

export function Outline() {
  return <TableOfContents sections={sections} />
}

API

sectionsTocSection[]The id of each section and the label to show for it.
offsetnumberHow far below the top a heading counts as reached. Defaults to 96.
labelstringThe accessible name and the visible heading.
onActiveChange(id: string | null) => voidRuns when the reader moves into another section.

Accessibility

The current entry is marked with aria-current, so its position is announced rather than shown only in weight. Sections on a documentation page are tall and very uneven, so this tracks the heading most recently scrolled past instead of observing which box intersects a band, which selects several at once or none. The final section is often too short to reach the line, so the bottom of the page selects it outright.