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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

## 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="#installation">Installation</TocMenuLink>
    </TocMenuItem>
    <TocMenuItem>
      <TocMenuLink href="#usage">Usage</TocMenuLink>
    </TocMenuItem>
    <TocMenuItem>
      <TocMenuLink href="#custom-title" depth={3}>
        Custom Title
      </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.