For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/anchor.md.
Leaf UI
  • English

      • 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.