Anchor

When To Use

For displaying anchor hyperlinks on page and jumping between them.

Notes for developers

After version 4.24.0, we rewrite Anchor use FC, Some methods of obtaining ref and calling internal instance methods will invalid.

Examples

<code src="./demo/basic.tsx" iframe="200">Basic</code> <code src="./demo/horizontal.tsx" iframe="200">Horizontal Anchor</code> <code src="./demo/static.tsx" >Static Anchor</code> <code src="./demo/onClick.tsx">Customize the onClick event</code> <code src="./demo/customizeHighlight.tsx">Customize the anchor highlight</code> <code src="./demo/targetOffset.tsx" iframe="200">Set Anchor scroll offset</code> <code src="./demo/onChange.tsx">Listening for anchor link change</code> <code src="./demo/replace.tsx" iframe="200">Replace href in history</code> <code src="./demo/legacy-anchor.tsx" debug>Deprecated JSX demo</code> <code src="./demo/style-class.tsx" iframe="200" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/component-token.tsx" iframe="800" debug>Component Token</code>

API

Common props ref：Common props

Anchor Props

Property	Description	Type	Default	Version
affix	Fixed mode of Anchor	boolean \| Omit<AffixProps, 'offsetTop' \| 'target' \| 'children'>	true	object: 5.19.0
bounds	Bounding distance of anchor area	number	5
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
getContainer	Scrolling container	() => HTMLElement	() => window
getCurrentAnchor	Customize the anchor highlight	(activeLink: string) => string	-
offsetTop	Pixels to offset from top when calculating position of scroll	number	0
showInkInFixed	Whether show ink-square when `affix={false}`	boolean	false
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
targetOffset	Anchor scroll offset, default as `offsetTop`, example	number	-
onChange	Listening for anchor link change	(currentActiveLink: string) => void
onClick	Set the handler to handle `click` event	(e: MouseEvent, link: object) => void	-
items	Data configuration option content, support nesting through children	{ key, href, title, target, children }[] see	-	5.1.0
direction	Set Anchor direction	`vertical` \| `horizontal`	`vertical`	5.2.0
replace	Replace items' href in browser history instead of pushing it	boolean	false	5.7.0

AnchorItem

Property	Description	Type	Default	Version
key	The unique identifier of the Anchor Link	string \| number	-
href	The target of hyperlink	string
target	Specifies where to display the linked URL	string
title	The content of hyperlink	ReactNode
children	Nested Anchor Link, `Attention: This attribute does not support horizontal orientation`	AnchorItem[]	-
replace	Replace item href in browser history instead of pushing it	boolean	false	5.7.0

Link Props

We recommend using the items form instead.

Property	Description	Type
href	The target of hyperlink	string
target	Specifies where to display the linked URL	string
title	The content of hyperlink	ReactNode

Semantic DOM

Design Token

FAQ

In version `5.25.0+`, the `:target` pseudo-class of the destination element does not take effect as expected after anchor navigation. {#faq-target-pseudo-class}

For the purpose of page performance optimization, the implementation of anchor navigation has been changed from window.location.href to window.history.pushState/replaceState. Since pushState/replaceState does not trigger a page reload, the browser will not automatically update the matching state of the :target pseudo-class. To resolve this issue, you can manually construct the full URL: href = window.location.origin + window.location.pathname + '#xxx'.

Related issues: #53143 #54255