# FloatingToc

> Table of contents that tracks the section being read.

Source: https://ui.jcsoftdev.com/docs/components/floating-toc

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

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

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

## Usage

```tsx
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](/storybook/?path=/story/navigation-floatingtoc--default)
- [Narrow](/storybook/?path=/story/navigation-floatingtoc--narrow)
- [Brutal Preset](/storybook/?path=/story/navigation-floatingtoc--brutal-preset)

## Source

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