Breadcrumb | M3 Vue

Shape

Action--md-shape-action28pxButton, IconButton, ButtonGroup, Select, DatePicker actions, FAB menu actions

Field--md-shape-field16pxTextField rounded containers

Field square--md-shape-field-square12pxTextField square containers, InputOtp inputs

Chip--md-shape-chip8pxChip, Menu inactive containers, Tabs active tonal containers, TimePicker fields

Card--md-shape-card12pxCard, rich Tooltip, Tabs tonal containers and focus indicators

Popover--md-shape-popover16pxMenu surfaces, active menu containers, detached SideSheet surfaces

Compact--md-shape-compact4pxSnackbar and plain Tooltip surfaces

Overlay--md-shape-overlay28pxDialog, DatePicker surfaces, TimePicker surfaces

Indicator--md-shape-indicatorfullLinearProgressIndicator, LoadingIndicator, NavigationRail active indicators, ListItem indicators

FAB--md-shape-fab16pxFloatingActionButton and FloatingActionButtonMenu triggers

CSS

:root {
  --md-shape-action: 28px;
  --md-shape-field: 16px;
  --md-shape-field-square: 12px;
  --md-shape-chip: 8px;
  --md-shape-card: 12px;
  --md-shape-popover: 16px;
  --md-shape-compact: 4px;
  --md-shape-overlay: 28px;
  --md-shape-indicator: 9999px;
  --md-shape-fab: 16px;
}

Breadcrumbs show the current page location within a navigational hierarchy.

Highlight

Element	Part	Selector
`<nav>`	root	`[data-scope="breadcrumb"][data-part="root"]` `left_clickLMB`Copy
`<ol>`	list	`[data-scope="breadcrumb"][data-part="list"]` `left_clickLMB`Copy
`<li>`	item	`[data-scope="breadcrumb"][data-part="item"]` `left_clickLMB`Copy
`<span>`	ellipsisconditional	`[data-scope="breadcrumb"][data-part="ellipsis"]` `left_clickLMB`Copy
`<span>`	separator	`[data-scope="breadcrumb"][data-part="separator"]` `left_clickLMB`Copy

API

Name	Description	Default	Control
`ariaLabel`Optional	Accessible label for the breadcrumb navigation landmark. `string \| undefined`	`"Breadcrumb"`
`items`Optional	Breadcrumb items. The last item is treated as the current page by default. `BreadcrumbItem[] \| undefined`	`[]`	-
`separatorIcon`Optional	Material Symbols icon used between items. `string \| undefined`	`"chevron_right"`
`ellipsisLabel`Optional	Accessible label for ellipsis items. `string \| undefined`	`"More items"`

Name	Type	Description
`itemClick`	`[event: MouseEvent, item: BreadcrumbItem, index: number]`	-

Name	Parameters	Description
`default`	-	Fully custom breadcrumb content. When provided, items are not rendered.
`item`	-	Custom item content.
`separator`	-	Custom separator content.
`ellipsis`	-	Custom ellipsis content.

Preview

Token	Description
`--md-breadcrumb-current-page-color`Color Fallback`var(--md-color-on-container, var(--md-sys-color-on-surface))`	Controls current page text color.
`--md-breadcrumb-ellipsis-color`Color Fallback`var(--md-color-on-container, var(--md-sys-color-on-surface-variant))`	Controls ellipsis color.
`--md-breadcrumb-item-height`Layout Fallback`--dp(32)`	Controls item height.
`--md-breadcrumb-item-space`Layout Fallback`--dp(4)`	Controls space between items.
`--md-breadcrumb-link-color`Color Fallback`var(--md-color-on-container, var(--md-sys-color-primary))`	Controls link text color.
`--md-breadcrumb-link-padding-inline`Layout Fallback`--dp(8)`	Controls link inline padding.
`--md-breadcrumb-link-shape`Shape Fallback`var(--md-shape-action)`	Controls link shape.
`--md-breadcrumb-separator-color`Color Fallback`var(--md-color-on-container, var(--md-sys-color-on-surface-variant))`	Controls separator color.
`--md-breadcrumb-separator-icon-size`Layout Fallback`--dp(18)`	Controls separator and ellipsis icon size.
`--md-breadcrumb-state-layer-color`Color Fallback`var(--md-state-layer-color, var(--md-breadcrumb-link-color))`	Controls link state layer color.

Examples

Default

Collapsed

Custom Separator

Vue Router

Use @item-click to bridge item clicks into your router.