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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/anchor.md.
Leaf UIReact components
GitHub

Anchor

Navigate long pages and keep important actions visible.

Basic usage

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
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>
  );
}

Custom scroll container

Scroll to keep the action visible.

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>
  );
}

AnchorItem

PropertyTypeDefaultDescription
keystring—Required. Stable, unique identifier.
titleReactNode—Required. Title content.
hrefstring—Required. Link destination.
childrenreadonly AnchorItem[]—Content, or child nodes for hierarchical records.

Anchor API

PropertyTypeDefaultDescription
itemsreadonly AnchorItem[]—Required. Items to display.
container() => HTMLElement | Window—Custom portal or scroll container.
offsetnumber12Scroll-target distance from the container top in pixels.
activeKeystring—Controlled active section.
onActiveChange(key: string) => void—Called when the active section changes.
smoothbooleantrueEnable smooth scrolling, respecting reduced motion.

Affix API

PropertyTypeDefaultDescription
offsetTopnumber0Distance from the container top in pixels.
offsetBottomnumber—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.

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.