Breadcrumb

Usage

The last item always renders as the current page - a plain, non- interactive label, never a link, regardless of whether it has its own to:

<SBreadcrumb :items="[
  { label: 'Home', to: '/' },
  { label: 'Components', to: '/components' },
  { label: 'Breadcrumb' },
]" />

With icons

<SBreadcrumb :items="[
  { label: 'Home', to: '/', icon: 'hugeicons:home-01' },
  { label: 'Settings', to: '/settings', icon: 'hugeicons:settings-01' },
]" />

Disabled item

An earlier item without a to (or with disabled set) renders inert - same look as the trail, without being clickable:

<SBreadcrumb :items="[
  { label: 'Home', to: '/' },
  { label: 'Archived project', to: '/projects/archived', disabled: true },
  { label: 'Report' },
]" />

Custom separator

separator-icon replaces the default chevron:

<SBreadcrumb :items="items" separator-icon="hugeicons:slash" />

Collapsing long trails

max-items collapses the middle of a long trail behind an ellipsis button once there are more items than that - the first item and the last maxItems - 1 stay visible, everything else moves into an overflow menu:

<SBreadcrumb :items="items" :max-items="4" />

Truncating long labels

truncate keeps a single long label - a dynamic product title, say - from breaking the trail's layout. true caps it at 12rem; pass a CSS length string ('20rem', '300px') for a custom cap. The full label is still available on hover via the native title attribute:

<SBreadcrumb :items="items" truncate />

Custom :ui

Global and scoped recipe overrides use ui.breadcrumb. Its collapsed overflow menu and icons remain ordinary nested ui.dropdown and ui.icon components.

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's Breadcrumb's own theme file:

Props

BreadcrumbItem is { label: string, icon?: string, to?: string, disabled?: boolean }.

Slots