Navigation · Breadcrumb
Breadcrumb
Breadcrumbs allow users to make selections from a range of values and provide an auxiliary navigation that can return to previous page.
Demos
How to import
Basic Usage
With Icons
Size
You can set the
compact
property to false
to increase the size of icons and texts.Custom Separator
Default separator is
/
.Truncated Logic
After v0.34.0, the truncation happens if the text is overflowed. Default max-width is set to 150px. You could use
showTooltip
to customize ellipsis behavior.When the path exceeds 4 levels, the second level to the penultimate one will be replaced by ellipsis. You can click the ellipsis to reveal all levels.
For v>=1.9.0 , you could use
maxItemCount
to set the number exceeded to trigger auto collapse.Custom Ellipsis
There are two ellipsis area rendering types provided inside the component. You can set and select the desired rendering type through
moreType
. The optional values of moreType
are default
and popover
.If you want to customize other forms of rendering for the ellipsis area, you can use the
renderMore()
method.Route Object
Breadcrumb supports passing in an array of strings or route objects consisting of
{ name, path, href, icon }
. You can also use renderItem
to render React.nodes. Breadcrumbs created in this way will also be truncated.name
: Name displayed, default with an empty string. When route passed in is a string only, it is set to name property.path
: Routing path.href
: Link destination and is mounted on the<a>
tag.icon
: Icon displayed.
API reference
Breadcrumb
Properties | Instructions | type | Default | version |
---|---|---|---|---|
autoCollapse | Toggle whether to auto collapse when exceed maxItemCount | boolean | true | 1.9.0 |
className | Class name | string | - | |
compact | Compact sizing | boolean | true | |
maxItemCount | Set the number of item when reached to collapse | number | 4 | 1.9.0 |
moreType | ...area rendering type,one of 'default'、'popover' | string | 'default' | 1.27.0 |
renderItem | Custom function, used with routes | (Route: Route) => React Node | - | 0.27.0 |
renderMore | Custom ... area rendering | (restItem: ReactNode[]) => ReactNode | - | 1.27.0 |
routes | Routing information, an array of route objects or strings, format reference: Route | Array<Route | string> | - | |
separator | Customized delimiter | string | ReactNode | '/' |
showTooltip | Toggle whether to show tooltip if text overflowed. If passed in as an object: width, overflowed width; ellipsisPos, ways of truncation; opts, passed directly to Tooltip component | boolean | showToolTipProps | {width: 150, ellipsisPos: 'end', opts: { autoAdjustOverflow: true, position: "bottomLeft" }} | 0.34.0 |
style | Inline style | CSSProperties | - | |
onClick | Click event | (item: Route, e: Event) => void | - | 0.27.0 |
Breadcrumb.Item
Properties | Instructions | type | Default | version |
---|---|---|---|---|
href | Destinations for links | string | - | |
icon | Displayed icon | ReactNode | - | |
onClick | Click event | function (item: Route, e: Event) | - | 0.27.0 |
separator | Separator, used to override parent separator | ReactNode | - | 1.16.0 |
noLink | To remove hover and active effect on an item | boolean | false | 1.16.0 |
Route
Properties | Instructions | type | Default | version |
---|---|---|---|---|
href | Link destinations | string | - | 0.27.0 |
icon | Displayed icon | ReactNode | - | |
name | Routing name | string | - | |
path | Routing path | string | - |
After v>=1.16.0, other props in Breadcrumb.Item are also supported correspondingly.
Accessibility
- Breadcrumb supports the
aria-label
props to indicate the function of the Breadcrumb - Breadcrumb will set
aria-current='page'
for the current item
Content Guidelines
- Each page link should be short and clearly reflect the location or entity it links to
- Write in sentence case