Breadcrumb

Horizontal path trail for hierarchy (items with id, label, optional href).

HTML tag: c-ec92f8af844bb4419bee07d0ee3f9388a

When to use

• page location trail (Home > Settings > Profile)
• hierarchical path with overflow ellipsis
• navigate up the folder/entity hierarchy

Props

Prop	Type	Default	Description
items	Array	“
active_item_id	String
max_items	Number
overflow_mode	String	center
separator_icon	String	mi:chevron_right
overflow_icon	String	mi:more_horiz
appearance	String	link
tone	String	neutral
size	String	sm
density	String	compact
current_appearance	String	outline
current_tone	String	primary
current_clickable	Boolean
aria_label	String	Breadcrumb

Rules

• Pass .items array; set active_item_id for current crumb.
• max_items + overflow_mode collapse middle segments.
• breadcrumb-select when user picks a segment; separator/overflow icons use mi: prefix.
• For app section switching use ab-nav/ab-tabs, not breadcrumb alone.

Events

Event	Detail
breadcrumb-select	id: String, href: String, index: Number
breadcrumb-overflow-click	hiddenItems: Array

What to avoid

Do not use as primary app menu (ab-nav). Do not confuse with ab-tree (hierarchical data browser).

Example

<c-ec92f8af844bb4419bee07d0ee3f9388a .items=${crumbs} .active_item_id=${currentId} @breadcrumb-select=${onCrumb}></c-ec92f8af844bb4419bee07d0ee3f9388a>