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, six sizes (xs–xxl), 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

xs / sm / md / lg / xl / xxl — 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

CSS Variables

Vue SFC

Every breadcrumb is themed through --mono-breadcrumb-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-breadcrumb> and the shadow build. The size and color props set presets, but an explicit --mono-breadcrumb-* override always wins. To re-skin globally, set the underlying --theme-* tokens.

Variable	Default	Controls
--mono-breadcrumb-accent	--theme-primary	Hover / current / pill color (set by color)
--mono-breadcrumb-text-soft	text 72%	Link text color
--mono-breadcrumb-text-faint	text 45%	Separator color
--mono-breadcrumb-border-lite	border 55%	contained item border
--mono-breadcrumb-radius	5px	Item corner radius (set by size)
--mono-breadcrumb-pad-x	0.35rem	Item horizontal padding (set by size)
--mono-breadcrumb-pad-y	0.18rem	Item vertical padding (set by size)
--mono-breadcrumb-gap	0.25rem	Gap between items (set by size)
--mono-breadcrumb-font	--theme-title-font-sm	Label font size (set by size)
--mono-breadcrumb-icon-size	0.8rem	Leading-icon size (set by size)
--mono-breadcrumb-sep-font	0.66rem	Separator font size (set by size)

Types

Importimport { BreadcrumbProps, BreadcrumbListProps } from 'mono-helper'

Prop	Value	Default	Description
<mono-breadcrumb>
items	BreadcrumbItem[]	—	List of breadcrumb segments to render.
modelValue	null | BreadcrumbItem	—	Two-way bound currently selected breadcrumb item.
variant	'default' | 'contained' | 'underlined'	—	Visual style of the breadcrumb.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Size of the breadcrumb.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'surface'	—	Color theme of the breadcrumb.
separator	string	—	Separator character shown between segments.
truncate	boolean	—	Truncates long segment titles with an ellipsis.
disabled	boolean	—	Disables interaction with all segments.
cssClass	BreadcrumbCssClass	—	Per-part class overrides for styling internal elements.
cssClassName	string	—	Extra class applied to the root element.
<mono-breadcrumb-list>
items	BreadcrumbItem[]	—	List of breadcrumb segments to render.
item	BreadcrumbItem	—	A single breadcrumb item to render.
title	string	—	Direct single-row props.
href	string	—	Link target for this segment.
icon	string	—	Icon name shown before the segment title.
badge	string | number	—	Badge text or count shown on the segment.
badgeColor	'primary' | 'success' | 'danger' | 'warning' | 'info' | 'default'	—	Color theme of the segment badge.
current	boolean	—	Marks this segment as the current one.
disabled	boolean	—	Disables interaction with this segment.
variant	'default' | 'contained' | 'underlined'	—	Standalone styling — only used when there is no parent `<mono-breadcrumb>`.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Size of the breadcrumb when standalone.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'surface'	—	Color theme of the breadcrumb when standalone.
separator	string	—	Separator character shown between segments when standalone.
truncate	boolean	—	Truncates long segment titles when standalone.