> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/anchor.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Anchor

Navigate long pages and keep important actions visible.

## Basic usage


- [Overview](#_r_rp_-0)
- [Members](#_r_rp_-1)
- [Settings](#_r_rp_-2)

### Overview

Scroll this area or select an item in the contents.

### Members

Scroll this area or select an item in the contents.

### Settings

Scroll this area or select an item in the contents.

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/anchor/basic.tsx"
import { Anchor } from '@ifhover/leaf-ui';

import { useCallback, useId, useRef } from 'react';

export function AnchorBasic() {
  const scroll = useRef<HTMLDivElement>(null),
    id = useId();
  const container = useCallback(() => scroll.current ?? window, []);
  const sections = [
    'Overview',
    'Members',
    'Settings',
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '120px minmax(0, 1fr)', gap: 20 }}>
      <Anchor
        container={container}
        items={sections.map((title, index) => ({ key: title, title, href: `#${id}-${index}` }))}
      />
      <div ref={scroll} style={{ height: 240, overflow: 'auto' }}>
        {sections.map((title, index) => (
          <section key={title} id={`${id}-${index}`} style={{ minHeight: 210 }}>
            <h3>{title}</h3>
            <p>
              {'Scroll this area or select an item in the contents.'}
            </p>
          </section>
        ))}
      </div>
    </div>
  );
}
```

Expand code

## Custom scroll container


Scroll to keep the action visible.

Save changes

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/anchor/basic.tsx"
import { Affix, Button } from '@ifhover/leaf-ui';

import { useCallback, useRef } from 'react';

export function AnchorAffix() {
  const scroll = useRef<HTMLDivElement>(null);
  const container = useCallback(() => scroll.current ?? window, []);
  return (
    <div
      ref={scroll}
      style={{
        height: 200,
        overflow: 'auto',
        background: 'var(--leaf-color-surface-muted)',
        padding: 16,
        borderRadius: 'var(--leaf-radius)',
      }}
    >
      <p>{'Scroll to keep the action visible.'}</p>
      <Affix container={container} offsetTop={8}>
        <Button>{'Save changes'}</Button>
      </Affix>
      <div style={{ height: 450 }} />
    </div>
  );
}
```

Expand code

## AnchorItem

| Property   | Type                                       | Default | Description                                       |
| ---------- | ------------------------------------------ | ------- | ------------------------------------------------- |
| `key`      | `string`                                   | —       | Required. Stable, unique identifier.              |
| `title`    | `ReactNode`                                | —       | Required. Title content.                          |
| `href`     | `string`                                   | —       | Required. Link destination.                       |
| `children` | `readonly `[`AnchorItem`](#anchoritem)`[]` | —       | Content, or child nodes for hierarchical records. |

## Anchor API

| Property         | Type                                       | Default | Description                                              |
| ---------------- | ------------------------------------------ | ------- | -------------------------------------------------------- |
| `items`          | `readonly `[`AnchorItem`](#anchoritem)`[]` | —       | Required. Items to display.                              |
| `container`      | `() => HTMLElement \| Window`              | —       | Custom portal or scroll container.                       |
| `offset`         | `number`                                   | `12`    | Scroll-target distance from the container top in pixels. |
| `activeKey`      | `string`                                   | —       | Controlled active section.                               |
| `onActiveChange` | `(key: string) => void`                    | —       | Called when the active section changes.                  |
| `smooth`         | `boolean`                                  | `true`  | Enable smooth scrolling, respecting reduced motion.      |

## Affix API

| Property        | Type                          | Default | Description                                   |
| --------------- | ----------------------------- | ------- | --------------------------------------------- |
| `offsetTop`     | `number`                      | `0`     | Distance from the container top in pixels.    |
| `offsetBottom`  | `number`                      | —       | Distance from the container bottom in pixels. |
| `container`     | `() => HTMLElement \| Window` | —       | Custom portal or scroll container.            |
| `onAffixChange` | `(affixed: boolean) => void`  | —       | Called when the affixed state changes.        |

## Types and interaction

Import the props and data types when creating reusable configuration.

```ts
import type { AnchorItem, AnchorProps, AffixProps } from '@ifhover/leaf-ui';
```

Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.