Component reference
TableOfContents
A controlled outline of a long document.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { TableOfContents, Prose } from "@pimolu/react";
export function DemoExample() {
const [active, setActive] = useState("outline-intro");
const items = [
{ id: "outline-intro", label: "Overview" },
{
id: "outline-install",
label: "Integration"
},
{
id: "outline-theme",
label: "Appearance"
}
];
return (
<div className="grid gap-5 min-w-0">
<TableOfContents
items={items}
activeId={active}
onNavigate={(item) => setActive(item.id)}
/>
<Prose>
<h2 id="outline-intro">Overview</h2>
<p>
This outline links to real headings inside this preview
document.
</p>
<h2 id="outline-install">Integration</h2>
<p>
Import components from the workspace and load the generated
shared CSS once.
</p>
<h2 id="outline-theme">Appearance</h2>
<p>
Use PimoluProvider to choose a preset, then keep application
refinements scoped.
</p>
</Prose>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Guide outline
Every outline entry points to an actual heading in this isolated document.
Nested article outline
Every outline entry points to an actual heading in this isolated document.
Controlled active heading
Every outline entry points to an actual heading in this isolated document.
Usage
Supply stable heading ids and update activeId from your own navigation or scroll tracking.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluTableOfContentsItem
Type source| Name | Type | Default | Description |
|---|---|---|---|
idRequired | string | — | Id of the heading the entry points to. |
labelRequired | ReactNode | — | Visible entry label. |
level | PimoluTableOfContentsLevel | undefined | 2 | Nesting level. Level 3 entries are nested inside the preceding level 2 entry. Defaults to 2. |
idRequiredstringNo default extracted.
Id of the heading the entry points to.
labelRequiredReactNodeNo default extracted.
Visible entry label.
levelPimoluTableOfContentsLevel | undefinedDefault: 2
Nesting level. Level 3 entries are nested inside the preceding level 2 entry. Defaults to 2.
PimoluTableOfContentsProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
itemsRequired | PimoluTableOfContentsItem[] | — | Public Pimolu prop; see the source declaration for details. |
activeId | string | undefined | — | Id of the entry that matches the heading in view. |
title | ReactNode | "On this page" | Visible title of the navigation. Defaults to "On this page". |
onNavigate | ((item: PimoluTableOfContentsItem) => void) | undefined | — | Called with the entry when one of its links is activated. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
onChange | ChangeEventHandler<HTMLElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLElement> | undefined | — | Standard React/HTML attribute. |
itemsRequiredPimoluTableOfContentsItem[]No default extracted.
Public Pimolu prop; see the source declaration for details.
activeIdstring | undefinedNo default extracted.
Id of the entry that matches the heading in view.
titleReactNodeDefault: "On this page"
Visible title of the navigation. Defaults to "On this page".
onNavigate((item: PimoluTableOfContentsItem) => void) | undefinedNo default extracted.
Called with the entry when one of its links is activated.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
onChangeChangeEventHandler<HTMLElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Every link must reach a real heading; distinguish the current location without color alone.