Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Toc
description: Displays a simple table of contents for page sections and subsections.
---

## Installation

```bash
npx shadcn@latest add @fulldev/toc
```

## Usage

```ts
import {
  Toc,
  TocMenu,
  TocMenuItem,
  TocMenuLink,
  TocTitle,
} from "@/components/ui/toc"
```

```astro
---
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

```astro live props={{ name: '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="#examples">Examples</TocMenuLink>
    </TocMenuItem>
  </TocMenu>
</Toc>
```

### Custom Title

You can choose any wrapper label and compose the structure yourself.

```astro live
---
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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/toc) for more information on props.