Indexes a long page and marks the section currently in view.
import { TableOfContents } from "@/fragments/ui";Source<TableOfContents>
<TableOfContents.Item id="introduction">Introduction</TableOfContents.Item>
<TableOfContents.Item id="getting-started">Getting Started</TableOfContents.Item>
<TableOfContents.Item id="installation" indent>Installation</TableOfContents.Item>
<TableOfContents.Item id="configuration" indent>Configuration</TableOfContents.Item>
<TableOfContents.Item id="api-reference">API Reference</TableOfContents.Item>npx @usefragments/cli add tableofcontentsWrites src/fragments/ui/components/TableOfContents plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
TableOfContents is a compound: import the root and reach its parts through dot notation.
TableOfContents.ItemTableOfContents.GroupSections and their subsections, indented.
<TableOfContents>
<TableOfContents.Item id="introduction">Introduction</TableOfContents.Item>
<TableOfContents.Item id="getting-started">Getting Started</TableOfContents.Item>
<TableOfContents.Item id="installation" indent>Installation</TableOfContents.Item>
<TableOfContents.Item id="configuration" indent>Configuration</TableOfContents.Item>
<TableOfContents.Item id="api-reference">API Reference</TableOfContents.Item>
<TableOfContents.Item id="examples">Examples</TableOfContents.Item>
</TableOfContents>Drops subsections when the index would crowd.
<TableOfContents hideSubItems>
<TableOfContents.Item id="overview">Overview</TableOfContents.Item>
<TableOfContents.Item id="basic-usage" indent>Basic usage</TableOfContents.Item>
<TableOfContents.Item id="advanced-usage" indent>Advanced usage</TableOfContents.Item>
<TableOfContents.Item id="accessibility">Accessibility</TableOfContents.Item>
</TableOfContents>Collapsible categories with counts.
<TableOfContents title="Components">
<TableOfContents.Item id="all" active>All</TableOfContents.Item>
<TableOfContents.Group label="Primitives" trailing={<span>3</span>}>
<TableOfContents.Item id="button">Button</TableOfContents.Item>
<TableOfContents.Item id="card">Card</TableOfContents.Item>
<TableOfContents.Item id="input">Input</TableOfContents.Item>The current section stays marked while you read.
<TableOfContents>
<TableOfContents.Item id="overview">Overview</TableOfContents.Item>
<TableOfContents.Item id="setup" active>Setup</TableOfContents.Item>
<TableOfContents.Item id="usage" indent>Basic Usage</TableOfContents.Item>
<TableOfContents.Item id="advanced" indent>Advanced</TableOfContents.Item>
<TableOfContents.Item id="props">Props</TableOfContents.Item>Any heading in place of the default.
<TableOfContents title="Contents">
<TableOfContents.Item id="chapter-1">Chapter 1: The Beginning</TableOfContents.Item>
<TableOfContents.Item id="chapter-2">Chapter 2: The Middle</TableOfContents.Item>
<TableOfContents.Item id="chapter-3">Chapter 3: The End</TableOfContents.Item>
</TableOfContents>Bare list where the surrounding layout already says enough.
<TableOfContents hideTitle>
<TableOfContents.Item id="section-a">Section A</TableOfContents.Item>
<TableOfContents.Item id="section-b" active>Section B</TableOfContents.Item>
<TableOfContents.Item id="section-c">Section C</TableOfContents.Item>
</TableOfContents>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | TableOfContents.Item or TableOfContents.Group elements |
label | string | Table of contents | Accessible label for the nav landmark |
title | string | On This Page | Visible title above the list |
hideTitle | boolean | false | Hide the visible title |
hideSubItems | boolean | false | Hide indented items and nested groups |