Anchor

Hyperlinks to scroll on one page.

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

Basic

The simplest usage.

Horizontal Anchor

Horizontally aligned anchors

Static Anchor

Do not change state when page is scrolling.

Customize the onClick event

Clicking on an anchor does not record history.

Customize the anchor highlight

Customize the anchor highlight.

Set Anchor scroll offset

Anchor target scroll to screen center.

Listening for anchor link change

Listening for anchor link change.

Replace href in history

Replace path in browser history, so back button returns to previous page instead of previous anchor item.

API

Common props ref：Common props

Anchor Props

Property	Description	Type	Default	Version
affix	Fixed mode of Anchor	boolean	true
bounds	Bounding distance of anchor area	number	5
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
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

Design Token

Component Token

Global Token

API

Common props ref：Common props

Anchor Props

Property	Description	Type	Default	Version
affix	Fixed mode of Anchor	boolean	true
bounds	Bounding distance of anchor area	number	5
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
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

Namu Design

Anchor

Namu Design

Anchor

When To Use

Examples

API

Anchor Props

AnchorItem

Link Props

Design Token

Component Token

Global Token

When To Use

Examples

API

Anchor Props

AnchorItem

Link Props

Design Token

Component Token

Global Token

AnchorChangelog

AnchorChangelog

When To Use

Examples

API

Anchor Props

AnchorItem

Link Props

Design Token

Component Token

Global Token

When To Use

Examples

API

Anchor Props

AnchorItem

Link Props

Design Token

Component Token

Global Token

Anchor

Anchor