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