Inline TOC
Each Markdown document displays a table of contents 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 for individual TOCInline components.
import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} />
Custom table of contents
The toc prop is just a list of heading items:
type TOCItem = {
value: string;
id: string;
level: number;
};
Note that the toc global is a flat array, so you can easily cut out unwanted nodes or insert extra nodes, and create a new TOC tree.
import TOCInline from '@theme/TOCInline';
<TOCInline
// Only show h2 and h4 headings
toc={toc.filter((node) => node.level === 2 || node.level === 4)}
minHeadingLevel={2}
// Show h4 headings in addition to the default h2 and h3 headings
maxHeadingLevel={4}
/>
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 subsubsection 1 a I
Example subsubsection 1 a II
Example subsubsection 1 a III
Example Subsection 1 b
Lorem ipsum
Example subsubsection 1 b I
Example subsubsection 1 b II
Example subsubsection 1 b III
Example Subsection 1 c
Lorem ipsum
Example subsubsection 1 c I
Example subsubsection 1 c II
Example subsubsection 1 c III
Example Section 2
Lorem ipsum
Example Subsection 2 a
Lorem ipsum
Example subsubsection 2 a I
Example subsubsection 2 a II
Example subsubsection 2 a III
Example Subsection 2 b
Lorem ipsum
Example subsubsection 2 b I
Example subsubsection 2 b II
Example subsubsection 2 b III
Example Subsection 2 c
Lorem ipsum
Example subsubsection 2 c I
Example subsubsection 2 c II
Example subsubsection 2 c III
Example Section 3
Lorem ipsum
Example Subsection 3 a
Lorem ipsum
Example subsubsection 3 a I
Example subsubsection 3 a II
Example subsubsection 3 a III
Example Subsection 3 b
Lorem ipsum
Example subsubsection 3 b I
Example subsubsection 3 b II
Example subsubsection 3 b III
Example Subsection 3 c
Lorem ipsum