The TableOfContents component is a table of contents navigation component used to display the heading structure of page content. It automatically detects heading elements on the page, generates a table of contents list, and highlights the currently visible heading as the user scrolls. When the page has only one heading or insufficient heading structure, the component will automatically hide.

Basic Usage

By default, the component automatically detects h2 and h3 headings on the page and generates a table of contents list:

<TableOfContents />

Custom Title and Selector

You can customize the title text of the table of contents and the heading selector to detect:

<TableOfContents
title="Chapter Navigation"
selector="h2, h3, h4"
maxDepth={4}
/>

Non-Fixed Position

By default, the table of contents is fixed on the right side. You can also set it to a non-fixed position:

<TableOfContents fixed={false} />

Custom Content Container

You can specify a specific content container, and the component will only look for headings within that container:

<TableOfContents containerSelector=".article-content" />