Skip to main content
Version: 2.0.0-alpha.71 🚧

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 contain all the top level headings of a MDX document.

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[];
};

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

Last updated on by Sébastien Lorber