docusaurus/website/docs/guides/markdown-features/markdown-features-inline-toc.mdx

---
id: inline-toc
title: Inline TOC
description: Using inline table-of-contents inside Docusaurus Markdown
slug: /markdown-features/inline-toc
---

import BrowserWindow from '@site/src/components/BrowserWindow';

Each markdown document displays a tab of content on the top-right corner.

But it is also possible to display an inline table of contents directly inside a markdown document, thanks to MDX.

## Full table of contents

The `toc` variable is available in any MDX document, and contain all the top level headings of a MDX document.

```jsx
import TOCInline from '@theme/TOCInline';

<TOCInline toc={toc} />;
```

```mdx-code-block
import TOCInline from '@theme/TOCInline';

<BrowserWindow>

<TOCInline toc={toc} />

</BrowserWindow>
```

## Custom table of contents

The `toc` props is just a list of table of contents items:

```ts
type TOCItem = {
  value: string;
  id: string;
  children: TOCItem[];
};
```

You can create this TOC tree manually, or derive a new TOC tree from the `toc` variable:

```jsx
import TOCInline from '@theme/TOCInline';

<TOCInline
  toc={
    // Only show 3th and 5th top-level heading
    [toc[2], toc[4]]
  }
/>;
```

```mdx-code-block
<BrowserWindow>

<TOCInline toc={[toc[2], toc[4]]} />

</BrowserWindow>
```

---

:::caution

The underlying content is just an example to have more table-of-contents items available in current page.

:::

## Example Section 1

Lorem ipsum

### Example Subsection 1 a

Lorem ipsum

### Example Subsection 1 b

Lorem ipsum

### Example Subsection 1 c

Lorem ipsum

## Example Section 2

Lorem ipsum

### Example Subsection 2 a

Lorem ipsum

### Example Subsection 2 b

Lorem ipsum

### Example Subsection 2 c

Lorem ipsum

## Example Section 3

Lorem ipsum

### Example Subsection 3 a

Lorem ipsum

### Example Subsection 3 b

Lorem ipsum

### Example Subsection 3 c

Lorem ipsum