Navigation
Breadcrumbs
One typed list in, correct landmark, ordered-list and current-page semantics out.Playground
Configure the component and copy synchronized Vue code.
Interactive preview
Changes are reflected in the example and source.
Properties
Overflow
Content
Vue
<m-breadcrumbs
:items="items"
/>Token map
The manual manifest combines inherited token owners with local deltas.
MBreadcrumbs · All61 tokens
md-breadcrumbsmd-button-container-heightg($t, 'container-height')Resolved value
40remmd-button-container-shapeg($t, 'container-shape')System token
--sys-shape-corner-fullmd-breadcrumbs-item-heightg($t, 'item-height')Resolved value
32remmd-breadcrumbs-item-shapeg($t, 'item-shape')System token
--sys-shape-corner-smallmd-breadcrumbs-divider-rtl-transformg($t, 'divider-rtl-transform')Resolved value
scaleX(-1)md-button-container-gapg($t, 'container-gap')Resolved value
8remmd-button-container-padding-inlineg($t, 'container-padding-inline')Resolved value
24remmd-button-container-padding-with-icong($t, 'container-padding-with-icon')Resolved value
16remmd-button-container-padding-icon-onlyg($t, 'container-padding-icon-only')Resolved value
8remmd-button-container-padding-text-inlineg($t, 'container-padding-text-inline')Resolved value
12remmd-breadcrumbs-list-gapg($t, 'list-gap')Resolved value
4remmd-breadcrumbs-item-padding-inlineg($t, 'item-padding-inline')Resolved value
8remmd-button-icon-sizeg($t, 'icon-size')Resolved value
18remmd-breadcrumbs-divider-sizeg($t, 'divider-size')Resolved value
18remmd-button-state-durationg($t, 'state-duration')System token
--sys-motion-duration-short-3md-button-state-easingg($t, 'state-easing')System token
--sys-motion-easing-standardmd-button-primary-filled-container-colorg($t, 'primary-filled-container-color')System token
--md-sys-color-primarymd-button-primary-filled-label-text-colorg($t, 'primary-filled-label-text-color')System token
--md-sys-color-on-primarymd-button-primary-elevated-container-colorg($t, 'primary-elevated-container-color')System token
--md-sys-color-surface-container-lowmd-button-primary-elevated-label-text-colorg($t, 'primary-elevated-label-text-color')System token
--md-sys-color-primarymd-button-primary-tonal-container-colorg($t, 'primary-tonal-container-color')System token
--md-sys-color-primary-containermd-button-primary-tonal-label-text-colorg($t, 'primary-tonal-label-text-color')System token
--md-sys-color-on-primary-containermd-button-primary-outlined-outline-colorg($t, 'primary-outlined-outline-color')System token
--md-sys-color-outlinemd-button-primary-outlined-label-text-colorg($t, 'primary-outlined-label-text-color')System token
--md-sys-color-primarymd-button-primary-text-label-text-colorg($t, 'primary-text-label-text-color')System token
--md-sys-color-primarymd-button-secondary-filled-container-colorg($t, 'secondary-filled-container-color')System token
--md-sys-color-secondarymd-button-secondary-filled-label-text-colorg($t, 'secondary-filled-label-text-color')System token
--md-sys-color-on-secondarymd-button-secondary-elevated-container-colorg($t, 'secondary-elevated-container-color')System token
--md-sys-color-surface-container-lowmd-button-secondary-elevated-label-text-colorg($t, 'secondary-elevated-label-text-color')System token
--md-sys-color-secondarymd-button-secondary-tonal-container-colorg($t, 'secondary-tonal-container-color')System token
--md-sys-color-secondary-containermd-button-secondary-tonal-label-text-colorg($t, 'secondary-tonal-label-text-color')System token
--md-sys-color-on-secondary-containermd-button-secondary-outlined-outline-colorg($t, 'secondary-outlined-outline-color')Resolved value
color-mix(secondary 50%, transparent)md-button-secondary-outlined-label-text-colorg($t, 'secondary-outlined-label-text-color')System token
--md-sys-color-secondarymd-button-secondary-text-label-text-colorg($t, 'secondary-text-label-text-color')System token
--md-sys-color-secondarymd-button-tertiary-filled-container-colorg($t, 'tertiary-filled-container-color')System token
--md-sys-color-tertiarymd-button-tertiary-filled-label-text-colorg($t, 'tertiary-filled-label-text-color')System token
--md-sys-color-on-tertiarymd-button-tertiary-elevated-container-colorg($t, 'tertiary-elevated-container-color')System token
--md-sys-color-surface-container-lowmd-button-tertiary-elevated-label-text-colorg($t, 'tertiary-elevated-label-text-color')System token
--md-sys-color-tertiarymd-button-tertiary-tonal-container-colorg($t, 'tertiary-tonal-container-color')System token
--md-sys-color-tertiary-containermd-button-tertiary-tonal-label-text-colorg($t, 'tertiary-tonal-label-text-color')System token
--md-sys-color-on-tertiary-containermd-button-tertiary-outlined-outline-colorg($t, 'tertiary-outlined-outline-color')Resolved value
color-mix(tertiary 50%, transparent)md-button-tertiary-outlined-label-text-colorg($t, 'tertiary-outlined-label-text-color')System token
--md-sys-color-tertiarymd-button-tertiary-text-label-text-colorg($t, 'tertiary-text-label-text-color')System token
--md-sys-color-tertiarymd-button-error-filled-container-colorg($t, 'error-filled-container-color')System token
--md-sys-color-errormd-button-error-filled-label-text-colorg($t, 'error-filled-label-text-color')System token
--md-sys-color-on-errormd-button-error-elevated-container-colorg($t, 'error-elevated-container-color')System token
--md-sys-color-surface-container-lowmd-button-error-elevated-label-text-colorg($t, 'error-elevated-label-text-color')System token
--md-sys-color-errormd-button-error-tonal-container-colorg($t, 'error-tonal-container-color')System token
--md-sys-color-error-containermd-button-error-tonal-label-text-colorg($t, 'error-tonal-label-text-color')System token
--md-sys-color-on-error-containermd-button-error-outlined-outline-colorg($t, 'error-outlined-outline-color')Resolved value
color-mix(error 50%, transparent)md-button-error-outlined-label-text-colorg($t, 'error-outlined-label-text-color')System token
--md-sys-color-errormd-button-error-text-label-text-colorg($t, 'error-text-label-text-color')System token
--md-sys-color-errormd-breadcrumbs-item-colorg($t, 'item-color')System token
--md-sys-color-on-surface-variantmd-breadcrumbs-item-current-colorg($t, 'item-current-color')System token
--md-sys-color-on-surfacemd-breadcrumbs-divider-colorg($t, 'divider-color')System token
--md-sys-color-outlinemd-button-{scheme}-{variant}-container-hover-colorg($t, '{scheme}-{variant}-container-hover-color')Resolved value
8% state layermd-button-{scheme}-{variant}-container-pressed-colorg($t, '{scheme}-{variant}-container-pressed-color')Resolved value
12% state layermd-button-{scheme}-{variant}-container-disabled-colorg($t, '{scheme}-{variant}-container-disabled-color')Resolved value
12% on-surfacemd-button-{scheme}-{variant}-label-text-disabled-colorg($t, '{scheme}-{variant}-label-text-disabled-color')Resolved value
38% on-surfacemd-breadcrumbs-item-disabled-colorg($t, 'item-disabled-color')Resolved value
on-surface 38%md-breadcrumbs-item-typographyg($t, 'item-typography')System token
--md-sys-typescale-label-large-sizeMBreadcrumbs API
Props, slots, and events are generated from the current public kit contract.
MBreadcrumbs
Navigation familysrc/runtime/components/ui/breadcrumbsProps
NameTypeDefault
itemsOrdered crumbs, root first. Input objects are never mutated.MBreadcrumbItem[]—ariaLabelAccessible name of the navigation landmark.string'Breadcrumbs'dividerSeparator between crumbs. Icon-like values render through `MIcon`; any other value (for example `/`) renders as text.string'round-chevron-right'overflowConstrained-width behavior. Every crumb is always preserved.'scroll' | 'wrap''scroll'Slots
Events
MBreadcrumbs does not emit component-specific events. Native events fall through to its root element.