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} />;

http://localhost:3000

• Full table of contents
• Custom table of contents
• Example Section 1
  • Example Subsection 1 a
  • Example Subsection 1 b
  • Example Subsection 1 c
• Example Section 2
  • Example Subsection 2 a
  • Example Subsection 2 b
  • Example Subsection 2 c
• Example Section 3
  • Example Subsection 3 a
  • Example Subsection 3 b
  • Example Subsection 3 c

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

http://localhost:3000

• Example Section 1
  • Example Subsection 1 a
  • Example Subsection 1 b
  • Example Subsection 1 c
• Example Section 3
  • Example Subsection 3 a
  • Example Subsection 3 b
  • Example Subsection 3 c

---

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