Anchor

A table of contents for one page, whose active link follows the reader as they scroll.

Preview in Figma LLMs

Overview

Design

Code

Anchor takes the same props as Ant Design's, and the file is yours once it is installed. The kit adds nothing beyond className merging, so no row in the API table is marked antuikit. It needs no icon pack.

Install

npx antuikit@latest init

npx antuikit@latest add anchor

The first command sets up AntuikitProvider and the theme tokens. The second adds this component.

Import

Import from @/components/ui/anchor, not from antd. The path points at the file in your project.

import { Anchor } from "@/components/ui/anchor"

The axes

direction takes vertical (the default) or horizontal. It matches the property in the Design tab.

vertical lists the links down a rail, with a bar that slides to the active one.
horizontal puts the links on one line that scrolls sideways and keeps the active link in view.
A horizontal anchor takes no nested items. It logs a warning and drops them.

Flags

Three booleans. Check the first one before anything else.

affix (true) wraps the rail in <Affix>, which fixes it in place once it scrolls past offsetTop. Inside a wrapper that is already sticky, the rail then escapes its column, so pass affix={false}. It also takes an object of Affix props, apart from offsetTop, target and children.
showInkInFixed (false) keeps the bar visible while the rail is fixed.
replace (false) replaces the history entry on each click instead of adding one, so Back leaves the page. An item can set its own.

Slots

The props that take a node.

title on an item takes any node. Only a string title gets a native tooltip, and long titles are cut off with an ellipsis, so keep node titles short.
children on an item is a list of nested items, shown only when direction is vertical.
children on Anchor itself is the old <Anchor.Link> form. It still works but is deprecated and logs a warning. Use items.

Events

onClick(event, link) fires when a link is clicked. preventDefault() skips the history entry, and the scroll still happens.
onChange(link) fires when the active link changes, from a scroll or a click.