Breadcrumb item<mds-breadcrumb-item>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
selectedselectedbooleanChoose if the component is selected or not
labelstringSets the label of the breadcrumb item
Overview
The <mds-breadcrumb-item> web component represents a single navigable depth in a breadcrumb trail. It is a compound child of <mds-breadcrumb> and renders a clickable label followed by a separator arrow.
Semantic Behavior
Compound child only: Must be placed as a direct default-slot child of <mds-breadcrumb>; it is not used standalone and the parent’s slot should contain only mds-breadcrumb-item elements, not mixed child types.Selection is parent-orchestrated: Clicking the item emits mdsBreadcrumbItemSelect with { id, selected }; the parent then marks the matching item selected and clears the others, so only one item is selected at a time.Selected item is inert to the pointer: While selected is true the item ignores pointer clicks; keyboard activation still reaches it and clears the selection. Non-selected items remain clickable.Keyboard activation: The item responds to keyboard activation in addition to pointer clicks.Decorative separator: The trailing arrow is decorative and carries no semantic meaning.
Properties & Visual Configurations
This child exposes essentially no visual configuration of its own - appearance is inherited from <mds-breadcrumb> and the shared button system, and styling overrides are done through the --mds-breadcrumb-item-* CSS custom properties listed in AGENTS.md.label: The item’s visible text. This is the only way to set the text - the component renders it through an internal <mds-button> and exposes no default slot. It matches the label prop convention used across Magma components.selected: Marks this item as the current depth. In normal use you set it on at most one item as the initial state; thereafter the parent manages it in response to navigation. Use it only to seed which depth is active on first render.