---
localeCode: en-US
order: 33
category: Navigation
title: Anchor
subTitle: Anchor
icon: doc-anchor
brief: The Anchor component is used to create a hyper Link navigation bar.
---
## Demos
### How to import
```jsx
import { Anchor } from '@douyinfe/semi-ui';
```
### Basic Usage
Use `Link` to create an anchor, click it to jump to the hash tag location.
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => (
)
```
### Integrated Usage
You can use `getContainer`, `targetOffset`, `offsetTop`, and `style` to create a out of the box hyperAnchor.Link navigation bar.
- getContainer：you can set the container of scroll content with `getContainer` property. Its default value is `window`.
- targetOffset: you can set the distance between the anchor point and the top of the container by setting `targetOffset`. **v>=1.9**
- style：the default `position` of Anchor is `relative`. You can customize it with `style` object.
- offsetTop：`offsetTop` can trigger the current Link switch when the scrolling content reaches a specified offset from the top of the container.
```jsx
import { Anchor } from '@douyinfe/semi-ui';
() => {
const getContainer = () => {
return document.querySelector('window');
}
return (
See the fixed Anchor on the right
=1.9
style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3}} >
)
}
```
### Size
You can change Anchor size with `size` property.
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => (
)
```
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => (
)
```
### Rail Theme
You can change rail color with `railTheme` property. Three themes are supported and the default value is `primary`.
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => {
const getContainer = () => {
return document.querySelector('window');
}
return (
)
}
```
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => {
const getContainer = () => {
return document.querySelector('window');
}
return (
)
}
```
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => {
const getContainer = () => {
return document.querySelector('window');
}
return (
)
}
```
### Auto Collapse
Anchor can dynamically display child links with `autoCollapse` property. The default is `false`.
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => {
const getContainer = () => {
return document.querySelector('window');
}
return (
)
}
```
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => {
const getContainer = () => {
return document.querySelector('window');
}
return (
)
}
```
### Show Tooltip
`showTooltip` can display the title of link when it exceeds the max-width. The default value is `false`.
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => {
const getContainer = () => {
return document.querySelector('window');
}
return (
)
}
```
### Tooltip Position
You can change the Tooltip position with `position` property. It only works when `showTooltip` is `true`.
```jsx live=true
import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';
() => {
const getContainer = () => {
return document.querySelector('window');
}
return (
)
}
```
## API Reference
### Anchor
| PROPERTIES | INSTRUCTIONS | TYPE | DEFAULT | VERSION |
| ------------ | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | --------- | - |
| autoCollapse | Dynamically display child link | boolean | false | |
| className | Class name | string | - | |
| defaultAnchor | Default highlight anchor | string | - | 1.20.0 |
| getContainer | Scroll container | () => HTMLElement | window | |
| maxHeight | max-height of Anchor | string \| number | `750px` | |
| maxWidth | max-width of Anchor | string \| number | `200px` | |
| offsetTop | Trigger the current link switch when the scrolling content reaches a specified offset from the top of the container | number | 0 | |
| onChange | Change event | (currentLink, previousLink) => void | - | |
| onClick | Click event | (event, currentLink) => void | - | |
| position | Tooltip position，same as `position` property of Tooltip component | string | - | |
| railTheme | Style of scroll rail，one of `primary`，`tertiary`，`muted` | string | `primary` | |
| scrollMotion | Animation of scroll behavior | boolean | false | |
| showTooltip | Show Tooltip | boolean | false | |
| size | Size of Anchor，one of `small`，`default` | string | `default` | |
| style | Style object | object | - | |
| targetOffset | Anchor offset from top of target | number | 0 | 1.9.0 |
### Anchor.Link
| PROPERTIES | INSTRUCTIONS | TYPE | DEFAULT |
| ---------- | ------------------------- | ----------------- | ------- |
| className | Class name | string | - |
| href | The target of hyper link | string | - |
| style | Style object | object | - |
| title | The content of hyper link | string\|ReactNode | - |
## Design Tokens
## FAQ
1. **Why didn't my link highlight and slide to follow?**
Check whether you can scroll to the specified position by clicking the anchor:
- No, it means there is a problem with the id. check whether the id exists in the document;
- Yes, it may be that the scrolling container is not set correctly to ensure that the content of the document is wrapped in the scrolling container. The default scrolling container is window. If your container is a div of .my-container, you should set the scrolling container to this div.
```jsx
function() {
const getContainer = () => {
return document.querySelector('.my-container');
}
return (
/* Links */
)
}
```