TableOfContents
An On this page list that follows the reader.
import { TableOfContents } from "@flinbu/seed";Inside a scrolling column
Design principles
Scroll this column. The list follows along.
Calm by default
Scroll this column. The list follows along.
Clear over clever
Scroll this column. The list follows along.
Voice and tone
Scroll this column. The list follows along.
Writing guidelines
Scroll this column. The list follows along.
import { TableOfContents } from "@flinbu/seed";
<div className="grid w-full max-w-2xl grid-cols-[1fr_12rem] items-start gap-lg">
<div id="toc-scroll" className="h-60 overflow-y-auto pr-sm">
{SECS.map(([id, label, l]) => (
<section key={id} className="min-h-36">
{React.createElement(l === 2 ? "h3" : "h4", { id, className: "m-0 mb-xs text-primary label-label-1-semibold" }, label)}
<p className="m-0 text-secondary body-body-3-regular">Scroll this column. The list follows along.</p>
</section>
))}
</div>
<TableOfContents root="#toc-scroll" offset={8} items={SECS.map(([id, label, level]) => ({ id, label, level }))} />
</div>Use it for
- Long docs pages.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { id, label, level? }[] | – | Heading ids. |
root | selectorrefelement | – | The scrolling element, when not the window. |
offset | number | 16 | Sticky header space. |
title | ReactNodefalse | 'On this page' | Label. |
Accessibility
- A nav landmark; the current section has aria-current=location; clicking moves focus to the heading (smooth scroll unless reduced motion).