logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.2
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Anchor

Hyperlinks to scroll on one page.
Importimport { Anchor } from "antd";
Sourcecomponents/anchor
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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

API

Common props ref:Common props

Anchor Props

PropertyDescriptionTypeDefaultVersion
affixFixed mode of Anchorboolean | Omit<AffixProps, 'offsetTop' | 'target' | 'children'>trueobject: 5.19.0
boundsBounding distance of anchor areanumber5
getContainerScrolling container() => HTMLElement() => window
getCurrentAnchorCustomize the anchor highlight(activeLink: string) => string-
offsetTopPixels to offset from top when calculating position of scrollnumber0
showInkInFixedWhether show ink-square when affix={false}booleanfalse
targetOffsetAnchor scroll offset, default as offsetTop, examplenumber-
onChangeListening for anchor link change(currentActiveLink: string) => void
onClickSet the handler to handle click event(e: MouseEvent, link: object) => void-
itemsData configuration option content, support nesting through children{ key, href, title, target, children }[] see-5.1.0
directionSet Anchor directionvertical | horizontalvertical5.2.0
replaceReplace items' href in browser history instead of pushing itbooleanfalse5.7.0

AnchorItem

PropertyDescriptionTypeDefaultVersion
keyThe unique identifier of the Anchor Linkstring | number-
hrefThe target of hyperlinkstring
targetSpecifies where to display the linked URLstring
titleThe content of hyperlinkReactNode
childrenNested Anchor Link, Attention: This attribute does not support horizontal orientationAnchorItem[]-
replaceReplace item href in browser history instead of pushing itbooleanfalse5.7.0

Link Props

We recommend using the items form instead.

PropertyDescriptionTypeDefaultVersion
hrefThe target of hyperlinkstring
targetSpecifies where to display the linked URLstring
titleThe content of hyperlinkReactNode

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
linkPaddingBlockVertical padding of linknumber4
linkPaddingInlineStartHorizontal padding of linknumber16
Global TokenHow to use?
Basic

The simplest usage.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Horizontal Anchor

Horizontally aligned anchors

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Set Anchor scroll offset

Anchor target scroll to screen center.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Replace href in history

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

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Static Anchor

Do not change state when page is scrolling.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Customize the onClick event

Clicking on an anchor does not record history.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Customize the anchor highlight

Customize the anchor highlight.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Listening for anchor link change

Listening for anchor link change.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props
Basic demo
Static demo
API
Anchor Props
Link Props