---
title: "Inline TOC"
description: "A collapsible table of contents to place inside a page."
url: https://docscn.dev/docs/components/inline-toc
lastModified: 2026-10-08T07:54:30.000Z
---

# Inline TOC (/docs/components/inline-toc)

> A collapsible table of contents to place inside a page.

<InlineTOC items="toc" />

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/inline-toc
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/inline-toc
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/inline-toc
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/inline-toc
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

In MDX, Fumadocs MDX passes the page's headings as `toc`:

```mdx
import { InlineTOC } from "@/components/docs/components/inline-toc";

<InlineTOC items={toc} />
```

Elsewhere, pass `page.data.toc`, or any `TOCItemType[]`. Children replace the "Table of Contents" label.

## Props [#props]

<TypeTable
  type="{
  items: {
    description: <>The headings to list.</>,
    type: &#x22;TOCItemType[]&#x22;,
    required: true,
  },
  defaultOpen: {
    description: (
      <>
        Start open. The other props of shadcn/ui <code>{&#x22;collapsible&#x22;}</code>{&#x22; &#x22;}
        work too.
      </>
    ),
    type: &#x22;boolean&#x22;,
    default: &#x22;false&#x22;,
  },
}"
/>