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

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'	'default'	Visual style of the breadcrumb.
size	'sm' | 'md' | 'lg'	'md'	Size of the breadcrumb.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'surface'	'primary'	Color theme of the breadcrumb.
separator	string	'›'	Separator character shown between segments.
truncate	boolean	false	Truncates long segment titles with an ellipsis.
disabled	boolean	false	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	false	Marks this segment as the current one.
disabled	boolean	false	Disables interaction with this segment.
variant	'default' | 'contained' | 'underlined'	'default'	Standalone styling — only used when there is no parent `<mono-breadcrumb>`.
size	'sm' | 'md' | 'lg'	'md'	Size of the breadcrumb when standalone.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'surface'	'primary'	Color theme of the breadcrumb when standalone.
separator	string	'›'	Separator character shown between segments when standalone.
truncate	boolean	false	Truncates long segment titles when standalone.