Breadcrumbs
Trail of breadcrumb links with chevron separators. When maxItems is exceeded, middle crumbs collapse into Breadcrumb Overflow (ellipsis → dropdown of truncated pages). Composes Figma Links / Separators / Overflow.
⌥-click (Option/Alt) nested elements to edit their props
Appearance
Content
Layout & behavior
Accessibility
Item icon (playground)
Props — Breadcrumbs
View MUI docs| Prop | Type | Description |
|---|---|---|
size | "large" | "medium" | "small" | "extraSmall" | Control height. Default medium (40). |
items | BreadcrumbItem[] | Trail items. Optional per-item iconName, iconOnly, current, href/onClick. |
maxItems | number | Collapse middle into overflow ellipsis when exceeded. |
itemsBeforeCollapse | number | Crumb count kept before the overflow ellipsis. |
itemsAfterCollapse | number | Crumb count kept after the overflow ellipsis. |
expandText | string | Accessible name for the overflow trigger. |
aria-label | string | Accessible name for the trail. |
Props — Breadcrumb Item
| Prop | Type | Description |
|---|---|---|
label | ReactNode | Crumb text or content. |
href | string | Link destination; omit when current. |
iconName | FaIconName | Optional leading icon on any crumb. |
iconOnly | boolean | Hide label visually; keep accessible name. |
current | boolean | Current page — rendered as text, not a link. |
disabled | boolean | Disables this crumb. |
key | string | Stable React key override. |
onClick | (event) => void | Click handler when href is omitted. |