FloatingToc

Table of contents that tracks the section being read. An IntersectionObserver watches the top band of the scroll area; the first heading inside it is current (aria-current="location").

Import

import { FloatingToc } from "@jcsoftdev/ui/navigation";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/navigation/floating-toc.

Usage

export const Default: Story = { render: () => <Article /> };

Source of the Storybook story.

Props

Prop	Type	Default	Description
items *	TocItem[]
title	string	"En esta página"	Heading shown above the list.
scrollRoot	RefObject<HTMLElement | null>		Scroll container that holds the headings. Omit to observe the viewport. Pass a ref (not the element) so it can be resolved after mount.
onActiveChange	((id: string | null) => void)		Called when the active section changes.
offsetTop	number	0	Pixels reserved at the top (sticky headers) when jumping to a section.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Narrow
• Brutal Preset

Source

packages/ui/src/navigation/floating-toc/floating-toc.tsx