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

PropertiesInstructionstypeDefaultversion
activeIndexControlled use, currently selected navigation index-2.61.0
autoCollapseToggle whether to auto collapse when exceed maxItemCountbooleantrue1.9.0
classNameClass namestring-
compactCompact sizingbooleantrue
maxItemCountSet the number of item when reached to collapsenumber41.9.0
moreType...area rendering type,one of 'default'、'popover'string'default'1.27.0
renderItemCustom function, used with routes(Route: Route) => React Node-0.27.0
renderMoreCustom ... area rendering(restItem: ReactNode[]) => ReactNode-1.27.0
routesRouting information, an array of route objects or strings, format reference: RouteArray<Route | string>-
separatorCustomized delimiterstringReactNode'/'
showTooltipToggle 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 componentboolean | showToolTipProps{width: 150, ellipsisPos: 'end', opts: { autoAdjustOverflow: true, position: "bottomLeft" }}0.34.0
styleInline styleCSSProperties-
onClickClick event(item: Route, e: Event) => void-0.27.0
PropertiesInstructionstypeDefaultversion
hrefDestinations for linksstring-
iconDisplayed iconReactNode-
onClickClick eventfunction (item: Route, e: Event)-0.27.0
separatorSeparator, used to override parent separatorReactNode-1.16.0
noLinkTo remove hover and active effect on an itembooleanfalse1.16.0

Route

PropertiesInstructionstypeDefaultversion
hrefLink destinationsstring-0.27.0
iconDisplayed iconReactNode-
nameRouting namestring-
pathRouting pathstring-
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

Design Tokens