Breadcrumbs

Breadcrumbs show a location in a hierarchy and keep deeply nested paths compact with an overflow menu.

#Example

#Usage

Add each location to items in order, starting with the top-level section. For the current page, omit href and onClick so it appears as text instead of a link.

#Deep trails

Every location that fits stays visible. When the trail is too wide, the locations after the first one move into the overflow menu one at a time, while the current location's parent stays visible. Open the menu to visit a location in between.

The menu lists hidden locations in order and scrolls when they don't all fit.

#Short trails

In a narrow space, labels truncate but keep a few readable characters. When even that doesn't fit, the first location moves into the overflow menu, then the current location's parent. The current location always stays visible.

#Icons

Use a single icon on the root breadcrumb to identify the section, especially in page headers. Keep descendant labels text-only.

#Long labels

Long names are truncated to fit the available space. Labels between the root and the current location truncate first, then the current location, and the root last. Hover over a truncated label in the trail or overflow menu to read its full name.

#Navigation

Use onClick for navigation within a pane that does not change the URL. Use href for destinations, including items inside the overflow menu, so opening a link in another tab still works.

#Router links

Pass a ref-forwarding linkComponent that accepts native anchor props and maps href to your router's destination prop. The adapter is used for visible links and overflow menu links. App pages should continue using their page shell's crumbs prop, which supplies the workspace-aware adapter.

#Guidelines

#When to use

• Show a page's location within a hierarchy.
• Navigate ancestors in nested folders or embedded panes.

#When not to use

• Show progress through a sequence of steps; use Wizard drawer.
• Switch between peer views; use Tab nav.

#Content

Use short location names. Keep customer-authored names intact. Pass a live React element when a label subscribes to form state.

Use an icon only on the root breadcrumb to identify the section; leave descendants text-only.

#Accessibility

Breadcrumbs renders a labeled navigation landmark and an ordered list. Only the final non-interactive item is marked as the current page. The overflow menu supports arrow keys, Enter, and Escape, returning focus to its trigger when dismissed. If navigating to an ancestor removes the overflow trigger, focus moves to the breadcrumb landmark unless the caller has moved it elsewhere. Give multiple trails distinct aria-label values. An item can also set aria-label when its visible label needs more context, such as “Navigate to all models” for “All”.

#Props

Inherits margin props.

Name	Default	Description
items	—	BreadcrumbItem[]Complete trail in hierarchy order. Every item that fits stays visible. Otherwise ancestors after the root fold into an overflow menu one at a time, and labels truncate to a readable minimum. When even that does not fit, the root folds, then the parent. The current item always stays visible.
linkComponent	—	ElementTypeRouter adapter accepting native anchor props, including href, and forwarding its ref.
aria-label	"Breadcrumb"	stringAccessible name of the navigation landmark.

#BreadcrumbItem

Name	Default	Description
label	—	string | ReactElementText, or a live label that subscribes to form state.
icon	—	ComponentType<SVGAttributes<SVGElement>>Optional leading icon.
href	—	stringNavigation URL. Omit for the current location or an action.
onClick	—	() => voidCalled when the item is activated, with or without a navigation URL.
aria-label	—	stringAccessible name when the visible label needs additional context.