Anchor

Scroll-spy table of contents that highlights the heading at the top of a scroll container.

import { Anchor } from '@lobehub/ui/base-ui';

NPM Source Edit

Navigation

Basic

Loading preview

APIs

Anchor properties

activeKey: null | string
getContainer: () => HTMLElement | Window | null | undefined
itemsRequired: AnchorItem[]
offset: number
Defaults to 0.
onChange: (key: string | null) => void
onClick: (event: MouseEvent<HTMLAnchorElement>, item: AnchorItem) => void
ref: null | (instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLElement | null>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

Also accepts all native HTML and ARIA attributes.

The active item is the last target whose top has passed offset pixels below the top of the container. getContainer returns the scroll element (default window) and is only called in effects, so it is SSR-safe. Clicking a link smooth-scrolls (instant under reduced motion) and keeps that link active until the scroll ends; call event.preventDefault() in onClick to handle navigation yourself.

Migrating from antd Anchor

affix, bounds, showInkInFixed, targetOffset, replace and direction are not supported; the list is always vertical with no ink bar.
onChange receives the item key (not the href); activeKey controls the highlight.