BreezeUI
  • English

    • Breadcrumb

    Displays the path to the current resource using a hierarchy of links. Based on BrConfigProvider for global theming, supporting responsive folding and custom separators.

    Component Features

    • 🔗 Routing Support: Supports BrLink for routing links and plain anchor elements.
    • ➡️ Custom Separators: Supports custom separator content and component overrides.
    • 📱 Responsive Folding: Supports ellipsis folding on small screens.
    • 🚫 Disabled State: Supports disabled prop for non-clickable items.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

    The most basic breadcrumb navigation.

    <script setup lang="ts">
import {
  BrBreadcrumb,
  BrBreadcrumbItem,
  BrBreadcrumbLink,
  BrBreadcrumbSeparator,
} from '@breezeui/vue'
</script>

<template>
  <BrBreadcrumb>
    <BrBreadcrumbItem>
      <BrBreadcrumbLink>Home</BrBreadcrumbLink>
    </BrBreadcrumbItem>
    <BrBreadcrumbSeparator />
    <BrBreadcrumbItem>
      <BrBreadcrumbLink>Components</BrBreadcrumbLink>
    </BrBreadcrumbItem>
    <BrBreadcrumbSeparator />
    <BrBreadcrumbItem>
      <BrBreadcrumbLink state="active">Breadcrumb</BrBreadcrumbLink>
    </BrBreadcrumbItem>
  </BrBreadcrumb>
</template>

    Custom Separator

    You can customize separators globally via props or locally using the default slot of BrBreadcrumbSeparator.

    <script setup lang="ts">
import {
  BrBreadcrumb,
  BrBreadcrumbItem,
  BrBreadcrumbLink,
  BrBreadcrumbSeparator,
} from '@breezeui/vue'
</script>

<template>
  <div class="space-y-6">
    <!-- Using props to configure global separator -->
    <BrBreadcrumb separator-type="text" separator="/">
      <BrBreadcrumbItem>
        <BrBreadcrumbLink>Home</BrBreadcrumbLink>
      </BrBreadcrumbItem>
      <BrBreadcrumbSeparator />
      <BrBreadcrumbItem>
        <BrBreadcrumbLink>Components</BrBreadcrumbLink>
      </BrBreadcrumbItem>
      <BrBreadcrumbSeparator />
      <BrBreadcrumbItem>
        <BrBreadcrumbLink state="active">Custom Text</BrBreadcrumbLink>
      </BrBreadcrumbItem>
    </BrBreadcrumb>

    <!-- Using slot to override local separator -->
    <BrBreadcrumb>
      <BrBreadcrumbItem>
        <BrBreadcrumbLink href="/">Home</BrBreadcrumbLink>
      </BrBreadcrumbItem>
      <BrBreadcrumbSeparator>
        <span class="text-primary font-bold">👉</span>
      </BrBreadcrumbSeparator>
      <BrBreadcrumbItem>
        <BrBreadcrumbLink state="active">Slot Separator</BrBreadcrumbLink>
      </BrBreadcrumbItem>
    </BrBreadcrumb>
  </div>
</template>

    Responsive Folding & Dropdown

    When breadcrumbs get too long, use BrBreadcrumbEllipsis along with a dropdown menu (like DropdownMenu or a custom implementation) to fold items. This example shows a basic visual folding effect.

    <script setup lang="ts">
import {
  BrBreadcrumb,
  BrBreadcrumbItem,
  BrBreadcrumbLink,
  BrBreadcrumbSeparator,
  BrBreadcrumbEllipsis,
} from '@breezeui/vue'
</script>

<template>
  <BrBreadcrumb>
    <BrBreadcrumbItem>
      <BrBreadcrumbLink>Home</BrBreadcrumbLink>
    </BrBreadcrumbItem>
    <BrBreadcrumbSeparator />
    <BrBreadcrumbItem>
      <BrBreadcrumbEllipsis />
    </BrBreadcrumbItem>
    <BrBreadcrumbSeparator />
    <BrBreadcrumbItem>
      <BrBreadcrumbLink>Components</BrBreadcrumbLink>
    </BrBreadcrumbItem>
    <BrBreadcrumbSeparator />
    <BrBreadcrumbItem>
      <BrBreadcrumbLink state="active">Breadcrumb</BrBreadcrumbLink>
    </BrBreadcrumbItem>
  </BrBreadcrumb>
</template>

    Disabled Items & States

    Control the state of a breadcrumb item via the state prop. Options include active (current page) and disabled (unclickable).

    <script setup lang="ts">
import {
  BrBreadcrumb,
  BrBreadcrumbItem,
  BrBreadcrumbLink,
  BrBreadcrumbSeparator,
} from '@breezeui/vue'
</script>

<template>
  <BrBreadcrumb>
    <BrBreadcrumbItem>
      <BrBreadcrumbLink>Home</BrBreadcrumbLink>
    </BrBreadcrumbItem>
    <BrBreadcrumbSeparator />
    <BrBreadcrumbItem>
      <BrBreadcrumbLink state="disabled">Settings (Disabled)</BrBreadcrumbLink>
    </BrBreadcrumbItem>
    <BrBreadcrumbSeparator />
    <BrBreadcrumbItem>
      <BrBreadcrumbLink state="active">Profile</BrBreadcrumbLink>
    </BrBreadcrumbItem>
  </BrBreadcrumb>
</template>

    Theming

    Breadcrumbs deeply integrate with BrConfigProvider. You can customize theming by supplying different color variables, or override styles directly with TailwindCSS classes.

    <script setup lang="ts">
import {
  BrConfigProvider,
  BrBreadcrumb,
  BrBreadcrumbItem,
  BrBreadcrumbLink,
  BrBreadcrumbSeparator,
} from '@breezeui/vue'
</script>

<template>
  <!-- Overriding global text color via ConfigProvider and hover/highlight via Tailwind classes -->
  <BrConfigProvider :theme="{ foreground: 'var(--blue-600)', mutedForeground: 'var(--blue-400)' }">
    <BrBreadcrumb>
      <BrBreadcrumbItem>
        <BrBreadcrumbLink class="transition-colors">Home</BrBreadcrumbLink>
      </BrBreadcrumbItem>
      <BrBreadcrumbSeparator />
      <BrBreadcrumbItem>
        <BrBreadcrumbLink state="active" class="text-blue-900 font-bold">Theming</BrBreadcrumbLink>
      </BrBreadcrumbItem>
    </BrBreadcrumb>
  </BrConfigProvider>
</template>

    API

    BrBreadcrumb

    NameTypeDefaultDescription
    separatorType'icon' | 'text''icon'Separator type
    separatorstring'ChevronRight'Separator value (icon name or string)

    BrBreadcrumbItem

    NameTypeDefaultDescription
    classany-Custom class names
    NameTypeDefaultDescription
    asstring'a'HTML element to render
    hrefstring-Link destination
    toany-Vue Router navigation target
    state'default' | 'active' | 'disabled''default'Active state of the link

    BrBreadcrumbSeparator

    NameTypeDefaultDescription
    separatorstring-Overrides global separator