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

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

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