'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navigation
Anchor
On-page navigation that follows the section you are reading.
Ant Design: Anchor
import { Anchor } from '@alea/ui';
Examples
Anchor
The links follow the section in view. Scroll the page to see it move.
Props
Anchor props
On-page navigation that follows the section you are reading (Ant's Anchor).
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | { id: string; label: ReactNode; level?: 2 | 3 | undefined; }[] | - | The sections: id of the heading or section, and the link text. Nest with level 2 or 3. |
className | string | - | Extra class names for the root element. |
offset | number | 80 | Space taken by a sticky header, so the active section is right. Default 80. |
title | ReactNode | 'On this page' | Title above the links. Default "On this page". |
Accessibility
- A navigation landmark; the section in view is marked aria-current="location".
Keyboard
| Key | Does |
|---|---|
| Tab | Moves between section links |
| Enter | Scrolls to the section |
Do and don't
Do
- Use it on long pages with three or more sections.
- Keep the labels the same as the headings.
Don't
- Don't use it for site navigation: use NavigationMenu or the sidebar.
- Don't link to sections that are hidden.