Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsAnchor
Designer doc
Anchor is a in-page navigation that extracts the main sections of a page content and allow users to quick jump to the section that they are looking for via the overview structure of page content displayed in anchor.
Example
Basic Usage
For Anchor to work properly, we need to first wrap the page in Anchor then provide getTargetProps props from useAnchorTarget with matching anchorId with the AnchorItem on Anchor Title and also provide getContainerProps props from useAnchorContainer hook on the scrollable container
View code
Variants
Anchor have variants: Basic (default), and Multilevel. For Multilevel anchor, can provide different level to AnchorItem, level 1 for main anchor while 2 for sub-anchor.
View code
Orientation
AnchorList also come with orientation Vertical (default) and Horizontal. Horizontal anchor list doesn’t have Multilevel variants.
View code
Customization
offset and scrollOptions can be provided to customize scroll behaviour. You can get some useful props like activeId, setActiveId, anchorsRef, containerRef, anchorItemsRef, anchorListRef from useAnchorContext
View code
References
- Ant Design: https://ant.design/components/anchor/
API
Anchor
| Prop name | Type | Default | Description |
|---|---|---|---|
| offset | number | 0 | |
| scrollOptions | CustomBehaviorOptions<void> |
AnchorItem
| Prop name | Type | Default | Description |
|---|---|---|---|
| anchorId | string | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| ellipsisTooltipProps | Omit<EllipsisTooltipProps, "children"> | ||
| keyboardClickKeys | string[] | ||
| level | ItemLevel | 1 | |
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| selected | boolean |
AnchorList
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| orientation | AnchorListOrientations | vertical | |
| variant | AnchorListVariants | basic |