Skip to main content
Version: 2.0.0-beta.16 🚧

Inline TOC

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 contains all the headings of an MDX document.

By default, only h2 and h3 headings are displayed in the TOC. You can change which heading levels are visible by setting minHeadingLevel or maxHeadingLevel.

import TOCInline from '@theme/TOCInline';

<TOCInline toc={toc} />;

Custom table of contents​

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

type TOCItem = {
value: string;
id: string;
children: TOCItem[];
level: number;
};

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

import TOCInline from '@theme/TOCInline';

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

caution

Below is just some dummy content to have more table of contents items available on the 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