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

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

};

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

}

/>;

• 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