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
`children?`	`ReactNode`	-
`single?`	`boolean`	`true`
`toc`	`TableOfContents`	-

Scroll Provider

Scrolls (the given scroll container) to the active anchor.

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

TOC Item

The anchor item to jump to the anchor.

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

Example

import { AnchorProvider, ScrollProvider, TOCItem } from 'fumadocs-core/toc';
import { type ReactNode, useRef } from 'react';
import type { TOCItemType } from 'fumadocs-core/server';

export function Page({
  items,
  children,
}: {
  items: TOCItemType[];
  children: ReactNode;
}) {
  const viewRef = useRef<HTMLDivElement>(null);

  return (
    <AnchorProvider toc={items}>
      <div ref={viewRef} className="overflow-auto">
        <ScrollProvider containerRef={viewRef}>
          {items.map((item) => (
            <TOCItem key={item.url} href={item.url}>
              {item.title}
            </TOCItem>
          ))}
        </ScrollProvider>
      </div>
      {children}
    </AnchorProvider>
  );
}

Usage

Anchor Provider

Scroll Provider

TOC Item

Example

On this page