UIBreadcrumb

UIBreadcrumb

A navigation component that shows the current location within a hierarchy.

<template>
  <UIBreadcrumb :items="items" separator="/">
    <template #item="{ item }">
      <router-link
        v-if="item.path"
        :to="item.path"
        class="text-primary-600 hover:text-primary-700"
      >
        {{ item.label }}
      </router-link>
      <span v-else>{{ item.label }}</span>
    </template>
  </UIBreadcrumb>
</template>

<script setup lang="ts">
interface BreadcrumbItem {
  label: string
  path?: string
  icon?: string
}

const items = ref<BreadcrumbItem[]>([
  { label: 'Home', path: '/' },
  { label: 'Products', path: '/products' },
  { label: 'Current Page' }
])
</script>

Props

• items (array): Breadcrumb items array
• separator (string): Item separator character
• separatorIcon (string): Custom separator icon
• maxItems (number): Maximum number of items to show
• collapsible (boolean): Enable item collapsing
• size (‘small’ | ‘medium’ | ‘large’): Component size

Events

• item-click: Emitted when breadcrumb item is clicked

Slots

• item: Custom item content
• separator: Custom separator content
• dropdown: Custom dropdown content for collapsed items