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

With more than three items, only the first and current locations stay visible. Open the overflow menu to visit a location in between.

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

#Short trails

Up to three items stay visible when space allows. If the trail is too wide, the middle item moves into the overflow menu.

#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. 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. More than three items always collapse to root, overflow, and current; shorter trails collapse only when they do not fit.
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.