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 blogsBreadcrumb
Designer doc
Breadcrumb is a component used for navigation and its display.
Example
Basic Usage
View code
Overflow
By default, the Breadcrumb always shows the first and last two items. If the Breadcrumb has more than three items, the items in between will be put into an dropdown menu. You can pass the props frontCount and rearCount to control how many item you would like to show at front and rear.
View code
Custom BreadcrumbMenu
View code
Variants
The Breadcrumb has 2 variants: Plain (default) and Filled.
View code
Custom Separator
View code
Gap
By default, distance between an item and adjacent separator is 0. You can specify gap prop to override it.
View code
Ellipsis
You can specify ellipsis prop to true on each item.
View code
Non-clickable
You can specify clickable prop to false on each item. By default it will be true.
View code
Accessibility
This component has pretty simple accessibility:
- Breadcrumb trail is contained within a navigation landmark region.
- The link to the current page has aria-current set to page. If the element representing the current page is not a link, aria-current is optional.
Please note that for (2) you need to handle it on your side. If you’re using react-router NavLink, aria-current="page" has been handled when active.
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
- Material-UI: https://material-ui.com/components/breadcrumbs/
- Ant Design: https://ant.design/components/breadcrumb/
API
Breadcrumb
| 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. | |
| frontCount | number | 1 | |
| gap | number | 0 | |
| listProps | ListProps | ||
| overflowMenuProps | Omit<BreadcrumbMenuProps, "button"> | ||
| rearCount | number | 2 | |
| separator | ReactNode | <ChevronRightIcon colorType="neuFore3rd" size={16} /> | |
| variant | BreadcrumbVariants | BreadcrumbVariants.Plain |
BreadcrumbItem
| 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. | |
| clickable | boolean | true | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| containerProps | LiHTMLAttributes<HTMLLIElement> & { as?: any; ref?: Ref<HTMLLIElement>; } | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| ellipsis | boolean | ||
| ellipsisTooltipProps | EllipsisTooltipProps | ||
| index | number | ||
| keyboardClickKeys | string[] | ||
| leftIcon | ReactNode | Element before the label. Equivalent to element on the label with some margin. | |
| loading | boolean | ||
| 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> | ||
| radius | number | ||
| rightIcon | ReactNode | Element after the label. Equivalent to element on the label with some margin. | |
| separator | ReactNode | ||
| size | ButtonSizes | small | |
| variant | ButtonVariants | text | Prefers naming it as variant because type is a known button html property. |
BreadcrumbMenu
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| button | ReactElement<BaseButtonProps & UseBreadcrumbItemOptions, any> | ||
| container | HTMLElement | ||
| immediate | boolean | ||
| index | number | ||
| initialActive | boolean | ||
| offset | [number, number] | ||
| onActiveChange | (active: boolean) => void | ||
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | bottom-start | |
| popperOptions | PopperPopperOptions | Options for floating.ui instance | |
| popperUpdateKey | string | ||
| springConfig | Partial<AnimationConfig> |
BreadcrumbMoreItem
| 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. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| containerProps | LiHTMLAttributes<HTMLLIElement> & { as?: any; ref?: Ref<HTMLLIElement>; } | ||
| disabled | boolean | Equivalent to button's disabled property. | |
| index | number | ||
| keyboardClickKeys | string[] | ||
| loading | boolean | ||
| 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> | ||
| radius | string | ||
| separator | ReactNode | ||
| size | IconButtonSizes | small | |
| tooltip | ReactNode | ||
| tooltipProps | Omit<TooltipProps, "title" | "children"> | ||
| variant | IconButtonVariants | flat |
useBreadcrumbItem
| Prop name | Type | Default | Description |
|---|---|---|---|
| containerProps | LiHTMLAttributes<HTMLLIElement> & { as?: any; ref?: Ref<HTMLLIElement>; } | ||
| index | number | ||
| separator | ReactNode |