Logo

Midnight Owl UI

Breadcrumb

Stable v1.0.2

A trail of navigation links showing the current page's position in the site hierarchy. The last item is always rendered as the current, non-clickable page.

Interactive Playground

Combine every prop live and copy the resulting code.

Leading Icon
Style
Small (sm)
Default
Left
Secondary (Neutral)
Actions
Live Source Code
<Breadcrumb :items="items" />

Basic Usage

Pass an ordered items array. Every item but the last renders as a link when it has a to; the last item is always the current, non-clickable page.

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

Variants

variant swaps the trail's weight - minimal drops the border/background for a bare trail (combine with :icon="false" for the plainest look).

Template
<Breadcrumb variant="default" :items="items" />
<Breadcrumb variant="minimal" :items="items" />

Sizes

Control padding, gap, and text scale using the size prop.

Template
<Breadcrumb size="xs" :items="items" />
<Breadcrumb size="sm" :items="items" />
<Breadcrumb size="md" :items="items" />
<Breadcrumb size="lg" :items="items" />
<Breadcrumb size="xl" :items="items" />

Alignment

align positions the trail within its parent - full stretches to 100% width and pins the first and last items to opposite edges.

Template
<Breadcrumb align="left" :items="items" />
<Breadcrumb align="center" :items="items" />
<Breadcrumb align="right" :items="items" />
<Breadcrumb align="full" :items="items" />

Severity

Tint the pill with the same core six severities every component in the library supports. secondary is the default and matches the component's original neutral look.

Template
<Breadcrumb severity="primary" :items="items" />
<Breadcrumb severity="secondary" :items="items" />
<Breadcrumb severity="success" :items="items" />
<Breadcrumb severity="warning" :items="items" />
<Breadcrumb severity="danger" :items="items" />
<Breadcrumb severity="info" :items="items" />

With Icons

Give any item its own icon for a distinct icon per crumb - additive to the whole-trail icon prop, which still works as the default leading icon.

Template
<Breadcrumb
  :icon="false"
  :items="[
    { label: 'Store', to: '/', icon: 'lucide:home' },
    { label: 'Cart', to: '/cart', icon: 'lucide:shopping-cart' },
    { label: 'Category', to: '/category', icon: 'lucide:layout-grid' },
    { label: 'Product', icon: 'lucide:package' }
  ]"
/>

With Actions

showRefresh adds a trailing refresh button emitting refresh. The actions slot renders after the refresh button for anything else, like a "more" kebab menu.

Template
<Breadcrumb :items="items" show-refresh @refresh="reload" />

With Dropdowns

Two distinct behaviors, both built on the same DropDown component: a per-item children array turns that item into a "Products ▾" menu trigger, and a trail too long for its container automatically collapses its middle items into a single "…" trigger listing them.

Template
<Breadcrumb
  :items="[
    { label: 'Store', to: '/' },
    {
      label: 'Products',
      children: [
        { label: 'Electronics', to: '/products/electronics' },
        { label: 'Clothing', to: '/products/clothing' },
        { label: 'Home & Garden', to: '/products/home-garden' }
      ]
    },
    { label: 'Laptops' }
  ]"
/>

Responsive Behavior

The trail measures its own container - not the viewport - so it collapses the same way whether it's embedded in a full-width header or a narrow card. Drag the handle below (or resize your browser) to see the middle items collapse into "…" as space runs out.

Router-Aware Links

The library ships framework-agnostic, so linked items render as plain <a> tags by default. In a Nuxt or vue-router app, use the item slot to swap in NuxtLink / RouterLink for client-side navigation — this docs site does exactly that for its own breadcrumbs.

Template
<Breadcrumb :items="items">
  <template #item="{ item, isLast }">
    <NuxtLink v-if="item.to && !isLast" :to="item.to">{{ item.label }}</NuxtLink>
    <span v-else aria-current="page">{{ item.label }}</span>
  </template>
</Breadcrumb>

API Reference

Props

Name
Type / Signature
Default
Description
items
{ label: string; to?: string; icon?: string; children?: { label: string; to?: string }[] }[]
-
The trail, in order. Every item with a `to` renders as a link except the last one, which always renders as the current page. `icon` shows a per-item leading icon; `children` renders the item as a dropdown trigger listing sub-links.
icon
string | false
"lucide:book-open"
Leading icon shown before the whole trail. Pass `false` to hide it.
separatorIcon
string
"lucide:chevron-right"
Icon rendered between items. Any Iconify name works, including glyph-style separators like `lucide:slash` or `lucide:separator-vertical`.
size
"xs" | "sm" | "md" | "lg" | "xl"
"sm"
Controls padding, gap, icon and text scale.
variant
"default" | "minimal"
"default"
`default` is the bordered pill look; `minimal` strips the border/background for a bare trail.
align
"left" | "center" | "right" | "full"
"left"
Positions the whole breadcrumb within its parent. `full` stretches to 100% width and pins the first and last items to opposite edges.
severity
"primary" | "secondary" | "success" | "warning" | "danger" | "info"
"secondary"
Tints the pill's border/background/text with the core six severities. `secondary` is the default and matches the component's original neutral look.
showRefresh
boolean
false
Renders a trailing refresh icon button after the trail; emits `refresh` on click.

Emits

Event
Signature
Description
refresh
()
Emitted when the `showRefresh` button is clicked.

Slots

Slot Name
Exposed Bindings
Description
item
{ item, index, isLast }
Overrides how a single item renders — use it to swap in a router-aware link (e.g. NuxtLink) instead of the default plain anchor. The default per-item icon and children-dropdown rendering only apply when this slot is left unset.
actions
-
Trailing custom content after the refresh button — e.g. a "more" kebab-menu DropDown.