TOC

A Table of Contents with active anchor observer and auto scroll.

Usage

import * as Base from 'fumadocs-core/toc';
 
return (
  <Base.AnchorProvider>
    <Base.ScrollProvider>
      <Base.TOCItem />
      <Base.TOCItem />
    </Base.ScrollProvider>
  </Base.AnchorProvider>
);

Anchor Provider

Watch for the active anchor using the Intersection API.

Prop	Type	Default
`toc`	`TableOfContents`	-
`single`	`boolean`	`true`
`children`	`ReactNode`	-

Scroll Provider

Contains all TOC items. It automatically scrolls to the active anchor.

Prop	Type	Default
`containerRef`	`RefObject<HTMLElement \| null>`	-
`children`	`ReactNode`	-

TOC Item

The item to jump to the anchor.

Data Attribute	Values	Description
`data-active`	`true, false`	Is anchor active

Usage

Anchor Provider

Scroll Provider

TOC Item

On this page