Breadcrumbs

Show where a page sits in the site.

import { Breadcrumbs } from 'components/UI/Breadcrumbs'

Basic

Use this on a deep page, such as a docs or handbook page, to show where it sits. Use links for parent pages and Page for the current page.

Open the ellipsis menu to reach the hidden parent pages.

In a narrow container, labels truncate with an ellipsis. This one is 384px wide.

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

End the trail with Breadcrumbs.Page for the current page, not a link.
maxItems folds the middle items into a menu. Keep each folded item a Breadcrumbs.Link directly inside its Item, so it still works from the menu.

Breadcrumbs is a site component. Its collapsed trail uses the library Menu component.

Prop	Type	Default	Description
maxItems	number	–	Limits visible items, including the menu trigger. The minimum is 3.
aria-label	string	'Breadcrumb'	Names the navigation region.
className	string	–	Adds classes to the navigation element.

Prop	Type	Default	Description
children	ReactNode	–	A Link, Page, or native action button.
className	string	–	Adds classes to the list item.

Prop	Type	Default	Description
to	string	–	The parent page path or URL. Required.
state	object	–	Passes state to site navigation.
onClick	function	–	Runs when the link activates.
contextMenu	boolean	false	Enables the site link context menu on visible links.
className	string	–	Adds classes to the link.

Prop	Type	Default	Description
children	ReactNode	IconChevronRight	Replaces the separator icon.

Prop	Type	Default	Description
children	ReactNode	–	The current page label.
className	string	–	Adds classes to the current page label.