table-of-contents

<TableOfContents /> reads all h2 and h3 headings from the current article and renders a linked navigation list. The active heading is highlighted as you scroll using IntersectionObserver. Returns nothing if the page has no qualifying headings.

The component is rendered automatically in the right-rail of the layout shell on every page — no directive needed. The ::table-of-contents directive remains available for placing an additional inline TOC anywhere in the MDX body.

Reference

::table-of-contents

No attributes.

Examples

Inline usage

Place ::table-of-contents anywhere in the MDX body to render a TOC in the content flow — useful at the top of a long article, after an intro paragraph, or inside a specific section.

A brief introduction paragraph.
 
::table-of-contents
 
## First heading
 
Content…

The directive below is a live inline ::table-of-contents rendered on this page. It reads the same headings as the right-rail TOC.

Right-rail vs. inline

The right-rail TOC (rendered by the layout shell) is always present and sticky. An inline ::table-of-contents renders the same list in the content flow at whatever position you place it — it does not replace or interact with the right-rail instance.

The sections below are detected by both the right-rail and the inline TOC above. Scroll to see the active heading update in both.

Section one

Content under the first h2. The table of contents link for this section becomes active as it enters the viewport.

Subsection A

h3 headings are indented one level under their parent h2.

Subsection B

A second h3 inside section one.

Section two

A second top-level h2. Its link activates as this section scrolls into view.

Subsection C

h3 inside section two.

Section three

A third h2 to demonstrate multi-section navigation.