Props
| Prop | Type | Default | Notes |
|---|---|---|---|
icon | string | mdi:chevron-right | |
tone | neutral | primary | secondary | tertiary | error | neutral |
StellarUI
<stellar-breadcrumbs>
ARIA-labeled breadcrumb list wrapper for direct ghost-button breadcrumb actions.
Properties
Preview
Markup
<stellar-breadcrumbs
icon="mdi:chevron-right"
tone="neutral"
>
<stellar-button appearance="ghost" href="#home">Home</stellar-button>
<stellar-button appearance="ghost" href="#documents">Documents</stellar-button>
<stellar-button appearance="ghost" current href="#project-plan">Project plan</stellar-button>
</stellar-breadcrumbs>API
Complete props, events, slots, and implementation notes for the shipped breadcrumb wrapper.
Events
| Event | Source | Notes |
|---|
Slots
| Slot | Notes |
|---|---|
| default | Author direct child controls such as <stellar-button appearance="ghost"> on the host. |
separator | Optional wrapper-owned separator content repeated between items. It overrides the icon prop. |
Notes
- The wrapper sets breadcrumb semantics, clones its direct children into an internal trail, and owns the shared separator contract through `icon` or `slot="separator"`.
- Use direct `stellar-button` children with `appearance="ghost"`. If a child is marked `current`, the cloned button is automatically disabled and keeps `aria-current="page"`.
- Use the wrapper `icon` prop for the common icon case, or provide `slot="separator"` content to override it for the whole trail.
- The component keeps authoring simple in light DOM while the rendered trail stays stable and separator-aware inside the component.