Installation
npx shadcn@latest add @fulldev/tocUsage
import {
Toc,
TocMenu,
TocMenuItem,
TocMenuLink,
TocTitle,
} from "@/components/ui/toc"---
import {
Toc,
TocMenu,
TocMenuItem,
TocMenuLink,
TocTitle,
} from "@/components/ui/toc"
---
<Toc aria-label="On This Page">
<TocTitle>On This Page</TocTitle>
<TocMenu>
<TocMenuItem>
<TocMenuLink href="#installation">Installation</TocMenuLink>
</TocMenuItem>
<TocMenuItem>
<TocMenuLink href="#usage">Usage</TocMenuLink>
</TocMenuItem>
<TocMenuItem>
<TocMenuLink href="#basic" depth={3}>Basic</TocMenuLink>
</TocMenuItem>
</TocMenu>
</Toc>Examples
---
import {
Toc,
TocMenu,
TocMenuItem,
TocMenuLink,
TocTitle,
} from "@/components/ui/toc"
---
<Toc aria-label="On This Page">
<TocTitle>On This Page</TocTitle>
<TocMenu>
<TocMenuItem>
<TocMenuLink href="#installation">Installation</TocMenuLink>
</TocMenuItem>
<TocMenuItem>
<TocMenuLink href="#usage">Usage</TocMenuLink>
</TocMenuItem>
<TocMenuItem>
<TocMenuLink href="#examples">Examples</TocMenuLink>
</TocMenuItem>
</TocMenu>
</Toc>Custom Title
You can choose any wrapper label and compose the structure yourself.
---
import {
Toc,
TocMenu,
TocMenuItem,
TocMenuLink,
TocTitle,
} from "@/components/ui/toc"
---
<Toc aria-label="Contents">
<TocTitle>Contents</TocTitle>
<TocMenu>
<TocMenuItem>
<TocMenuLink href="#overview">Overview</TocMenuLink>
</TocMenuItem>
<TocMenuItem>
<TocMenuLink href="#features">Features</TocMenuLink>
</TocMenuItem>
<TocMenuItem>
<TocMenuLink href="#notes" depth={3}>Notes</TocMenuLink>
</TocMenuItem>
</TocMenu>
</Toc>API Reference
See the GitHub source code for more information on props.