Breadcrumb

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

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

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