Breadcrumb

A navigation component that shows the current page's location within the site hierarchy. Supports collapsing, dropdowns, icons, sizes, loading state, truncation, custom separators, slots, and full class customization.

Basic

1. Home
2. /Products
3. /Electronics
4. /Headphones

<script setup>
import { VxBreadcrumb } from 'veloxui'

const items = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Electronics', href: '/products/electronics' },
  { label: 'Headphones' },
]
</script>

<template>
  <VxBreadcrumb :items="items" />
</template>

Sizes

Three sizes: small, default, and large.

small

1. Home
2. Products
3. Electronics
4. Headphones

default

1. Home
2. Products
3. Electronics
4. Headphones

large

1. Home
2. Products
3. Electronics
4. Headphones

<VxBreadcrumb :items="items" size="small" />
<VxBreadcrumb :items="items" size="default" />
<VxBreadcrumb :items="items" size="large" />

Separators

Choose from built-in separators or pass a custom string.

slash

1. Home
2. /Products
3. /Electronics
4. /Headphones

arrow

1. Home
2. Products
3. Electronics
4. Headphones

dot

1. Home
2. ·Products
3. ·Electronics
4. ·Headphones

dash

1. Home
2. –Products
3. –Electronics
4. –Headphones

<VxBreadcrumb :items="items" separator="slash" />
<VxBreadcrumb :items="items" separator="arrow" />
<VxBreadcrumb :items="items" separator="dot" />
<VxBreadcrumb :items="items" separator="dash" />

Custom Separator

Pass any string as the separator, or use the #separator slot.

1. Home
2. |Products
3. |Electronics
4. |Headphones

1. Home
2. →Products
3. →Electronics
4. →Headphones

1. Home
2. Products
3. Electronics
4. Headphones

<VxBreadcrumb :items="items" separator="|" />
<VxBreadcrumb :items="items" separator="→" />

<VxBreadcrumb :items="items">
  <template #separator>
    <MyIcon />
  </template>
</VxBreadcrumb>

Icons

Set icon on items to show built-in icons: home, folder, file, settings. Or use the #icon slot for custom icons.

1. Home
2. Documents
3. Report.pdf

<VxBreadcrumb :items="[
  { label: 'Home', href: '/', icon: 'home' },
  { label: 'Documents', href: '/docs', icon: 'folder' },
  { label: 'Report.pdf', icon: 'file' },
]" separator="arrow" />

Collapsed (Expand)

Use max-items to collapse long breadcrumbs. Click the ellipsis to expand.

1. Home
3. Navigation
4. Breadcrumb

<VxBreadcrumb :items="items" :max-items="3" />

Collapsed (Dropdown)

Set collapse-mode="dropdown" to show hidden items in a dropdown popover.

1. Home
3. Components
4. Breadcrumb

<VxBreadcrumb
  :items="items"
  :max-items="3"
  collapse-mode="dropdown"
/>

Truncation

Use max-width to truncate long labels with ellipsis. Hover to see the full text.

1. Home
2. This is a very long category name
3. Another extremely long breadcrumb item name
4. Final destination page with a long title

<VxBreadcrumb :items="items" :max-width="120" />

Loading

Show a skeleton placeholder while data is loading.

<VxBreadcrumb :items="items" loading />

Disabled Items

Individual items can be disabled.

1. Home
2. Archived
3. Old Page

<VxBreadcrumb :items="[
  { label: 'Home', href: '/' },
  { label: 'Archived', href: '/archived', disabled: true },
  { label: 'Old Page' },
]" />

Custom Item Slot

Use the #item slot for custom rendering. Receives item, index, and active.

1. Home
2. Documents
3. Report.pdf

<VxBreadcrumb :items="items">
  <template #item="{ item, active }">
    <MyIcon :name="item.icon" />
    {{ item.label }}
  </template>
</VxBreadcrumb>

Exposed Methods

Access expand(), collapse(), and isCollapsed via template ref.

<script setup>
import { ref } from 'vue'
const breadcrumbRef = ref()

function toggleCollapse() {
  if (breadcrumbRef.value.isCollapsed) {
    breadcrumbRef.value.expand()
  } else {
    breadcrumbRef.value.collapse()
  }
}
</script>

<template>
  <VxBreadcrumb ref="breadcrumbRef" :items="items" :max-items="3" />
  <button @click="toggleCollapse">Toggle</button>
</template>

Custom Classes

Override styling with root-class, item-class, active-class, and separator-class.

<VxBreadcrumb
  :items="items"
  root-class="my-breadcrumb"
  item-class="my-item"
  active-class="my-active"
  separator-class="my-sep"
/>

API

VxBreadcrumb Props

Prop	Type	Default	Description
items	BreadcrumbItem[]	[]	Breadcrumb items
separator	'slash' | 'arrow' | 'dot' | 'dash' | string	'slash'	Separator between items
size	'small' | 'default' | 'large'	'default'	Size variant
max-items	number	0	Max visible items (0 = show all). Collapses middle items.
collapse-mode	'expand' | 'dropdown'	'expand'	How collapsed items are revealed
max-width	number	0	Max width in px for each label. Truncates with ellipsis.
loading	boolean	false	Show skeleton loading state
root-class	string | string[] | object	—	Class on root <nav>
item-class	string | string[] | object	—	Class on every link
active-class	string | string[] | object	—	Class on the current (last) item
separator-class	string | string[] | object	—	Class on separator elements

BreadcrumbItem

Property	Type	Required	Description
label	string	Yes	Display text
href	string	No	Link URL
to	string | object	No	Vue Router destination (renders <router-link>)
icon	string	No	Built-in icon: home, folder, file, settings
disabled	boolean	No	Disable this item

Events

Event	Payload	Description
click	(item, index, event)	Item clicked
expand	—	Collapsed items expanded
collapse	—	Items collapsed again

Slots

Slot	Props	Description
item	{ item, index, active }	Custom item content
icon	{ item }	Custom icon per item
separator	—	Custom separator content
ellipsis	{ expand, toggleDropdown, collapsedItems }	Custom ellipsis button

Exposed

Name	Type	Description
expand()	() => void	Expand collapsed items
collapse()	() => void	Collapse items again
isCollapsed	boolean	Current collapse state