Toc

Basic usage

items is an array; each entry needs at least id and label. activeId controls the currently highlighted entry; clicking smoothly scrolls and updates the URL hash.

<CfToc
:items="items"
:active-id="'install'"
title="On this page"
/>

<CfToc items={items} activeId="install" title="On this page" />

Nested indentation

depth: 1..6 controls the indent level. Given correct depth values, the same items array forms nested indentation naturally.

const items: TocItem[] = [
{ id: 'intro', label: 'Intro', depth: 1 },
{ id: 'install', label: 'Install', depth: 1 },
{ id: 'install-vue', label: 'Vue 3', depth: 2 },
{ id: 'install-react', label: 'React 18', depth: 2 },
{ id: 'theme', label: 'Theme', depth: 1 },
{ id: 'theme-detail', label: 'Color details', depth: 3 },
];

<CfToc :items="items" />

const items: TocItem[] = [/* ... */];

<CfToc items={items} />

maxDepth limit

maxDepth caps the deepest level rendered — for a blog sidebar that only wants H1 / H2, pass maxDepth={2} and deeper headings are skipped.

<CfToc :items="items" :max-depth="2" />
<CfToc :items="items" :max-depth="4" />

<CfToc items={items} maxDepth={2} />
<CfToc items={items} maxDepth={4} />

Automatic scroll-spy

autoSpy: true makes the component observe headings whose id matches items and switch active based on viewport visibility. scrollRoot specifies the observed container; omit to observe the viewport.

<!-- Vue -->
<CfToc :items="items" auto-spy />
<CfToc :items="items" auto-spy scroll-root=".article-body" />

{/* React */}
<CfToc items={items} autoSpy />
<CfToc items={items} autoSpy scrollRoot=".article-body" />

API

TocItem: { id, label, depth? }. Events: update:activeId (React: onActiveIdChange).