---
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 {#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 {#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 {#example-section-1}

Lorem ipsum

### Example Subsection 1 a {#example-subsection-1-a}

Lorem ipsum

### Example Subsection 1 b {#example-subsection-1-b}

Lorem ipsum

### Example Subsection 1 c {#example-subsection-1-c}

Lorem ipsum

## Example Section 2 {#example-section-2}

Lorem ipsum

### Example Subsection 2 a {#example-subsection-2-a}

Lorem ipsum

### Example Subsection 2 b {#example-subsection-2-b}

Lorem ipsum

### Example Subsection 2 c {#example-subsection-2-c}

Lorem ipsum

## Example Section 3 {#example-section-3}

Lorem ipsum

### Example Subsection 3 a {#example-subsection-3-a}

Lorem ipsum

### Example Subsection 3 b {#example-subsection-3-b}

Lorem ipsum

### Example Subsection 3 c {#example-subsection-3-c}

Lorem ipsum