Breadcrumb

Shows the user's location within a hierarchy. Items with href are links; the last item is the current page.

ExamplesCodeUsageChangelog

Basic

1. Home
2. Equipment
3. Crusher #1

Tailwind v4

<Breadcrumb :items="[
  { label: 'Home', href: '/' },
  { label: 'Equipment', href: '/equipment' },
  { label: 'Crusher #1' },
]" />

Two levels

1. Dashboard
2. Reports

Tailwind v4

<Breadcrumb :items="[
  { label: 'Dashboard', href: '/' },
  { label: 'Reports' },
]" />

Single item

1. Dashboard

Tailwind v4

<Breadcrumb :items="[{ label: 'Dashboard' }]" />

Deep hierarchy

1. Home
2. Plants
3. Plant A
4. Shifts
5. Jun 9 — Day Shift

Tailwind v4

<Breadcrumb :items="[
  { label: 'Home', href: '/' },
  { label: 'Plants', href: '/plants' },
  { label: 'Plant A', href: '/plants/1' },
  { label: 'Shifts', href: '/plants/1/shifts' },
  { label: 'Jun 9 — Day Shift' },
]" />

Props

Prop	Type	Default	Description
items	BreadcrumbItem[]	—	Required. Ordered list of breadcrumb items

Types

interface BreadcrumbItem {
  label: string   // Display text
  href?: string   // Omit on the current/last item — renders as plain text
}