Breadcrumb<mds-breadcrumb>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
hideBackhideBackbooleanHides the back arrow button
Overview
The <mds-breadcrumb> web component is the navigation-trail container of the Magma Design System. It is a compound parent that arranges a sequence of slotted <mds-breadcrumb-item> children into a hierarchical path and adds an optional back-navigation control.
Semantic Behavior
Compound parent/child: The default slot accepts only <mds-breadcrumb-item> children.Selection tracking: When the user selects a child it becomes the single current depth and the others are cleared. Setting selected from code emits nothing, so the parent does not react to it.Back button: Unless hide-back is set the host renders a leading arrow that steps selection to the previous item; it auto-disables whenever the first item is current (or, on load, when no item is).Change event: mdsBreadcrumbChange fires after any selection change - via a child click or the back arrow - carrying the new index id and a caller item: the clicked item, or for the back arrow the item that was current before the step.Localized back button: The back button’s title is resolved per document language (el/en/es/it).
Properties & Visual Configurations
This component exposes a single behavioral prop:hideBack removes the leading arrow control. Leave it off (the default) for multi-level trails where users benefit from a one-tap step backwards; set it for shallow or display-only breadcrumbs where reverse navigation adds no value.Visual styling (item button colors, separator arrow color) is driven by the CSS custom properties documented in AGENTS.md, not by props; the current item’s colors are set on mds-breadcrumb-item with its --mds-breadcrumb-item-button-*-selected properties. The shared variant / tone / size ladders defined in agents/variants.md do not apply here; per-item labels and selection state live on the <mds-breadcrumb-item> children.