Table of contents
Vertical navigation list for long pages. Aligned with J&J DS v1.2 (Figma 20985:7052). Active item highlights with a left accent rule. Nested children collapse via a chevron; optional badges and a footer CTA.
Default (medium) — title + nested items + footer
The canonical pattern. Click an item to mark it active; nested-item rows collapse independently.
Show sourceHide source
<TableOfContents
title="Table of contents title"
items={items}
value={active}
onSelect={setActive}
footer={<Button variant="ghost" size="sm">Button text<Icon icon={ArrowRight} size="xs" /></Button>}
/>Small size
Tighter density — body-sm font, same indentation. Pair with a sticky sidebar in a long-form article layout.
Show sourceHide source
<TableOfContents size="sm" items={items} value={active} onSelect={setActive} />No title, no footer — embed in another container
Title and footer are both optional. Use this when the surrounding container already provides framing.
Show sourceHide source
<TableOfContents items={items.slice(0, 5)} />Disabled item
Mark items disabled to render them as non-interactive in tertiary text.
Show sourceHide source
{ id: "locked", label: "Disabled item", disabled: true }