Breadcrumb

A wayfinding component for page hierarchies — pair it with a page header above the title and subtitle. Items render as <a> when they include href, as <button> otherwise; the last item (or any item with current: true) becomes the unclickable current marker. Three variants (default, contained, underlined), six accent colors, three sizes, optional truncation, and per-item icon slots cover the v1 surface.

Basic

Three items separated by ›. Last item is the current page.

Vue SFC

Variants

default / contained / underlined side-by-side, same items.

Vue SFC

Sizes

sm / md / lg — affects font, padding, and gap.

Vue SFC

Colors

Six theme colors plus surface, applied to the current item and hover state.

Vue SFC

With icons

Items with leading SVG icons (slot="icon-{id}" for the Lit element).

Vue SFC

Separators

Custom separator strings (›, /, •) and a slotted SVG chevron.

Vue SFC

Interactive

Clicks emit mno-click; the demo logs each click and prevents anchor navigation.

Vue SFC

Truncation

Long path with the truncate flag — items overflow to ellipsis instead of wrapping.

Vue SFC

Customized

Per-element overrides via cssClass (Vue) or extra utility classes (CSS).

Vue SFC

Slot-body composition

Wrap with <mono-breadcrumb> for nav semantics + theming, slot a <mono-breadcrumb-list> as the body.

Vue SFC

Standalone list

<mono-breadcrumb-list> used directly with no wrapper — themes itself via modifier attributes.

Vue SFC