Skip to main content
Version: 2.0.0-beta.10 ๐Ÿšง

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 a 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

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