面包屑 (Breadcrumb)

显示当前页面在系统层级结构中的位置，并能向上返回。基于 BrConfigProvider 实现全局主题配置，支持响应式折叠和自定义分隔符。

组件特性

🔗 路由支持：支持 BrLink 路由链接和纯锚点元素。
➡️ 自定义分隔符：支持自定义分隔符内容和组件覆盖。
📱 响应式折叠：支持小屏幕省略号折叠。
🚫 禁用状态：支持 disabled 属性禁用点击。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

最基础的面包屑导航。

<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>

自定义分隔符

你可以通过全局属性或通过 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>

响应式折叠与下拉菜单

当面包屑过长时，可以使用 BrBreadcrumbEllipsis 并结合下拉菜单（如 DropdownMenu 或原生实现）来进行折叠展示。这里以基础视觉折叠效果为例。

<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>

禁用项与状态

通过设置 state 属性可以控制面包屑的状态，如 active 表示当前页，disabled 表示禁用不可点击。

<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>

主题定制

面包屑组件深度集成了 BrConfigProvider。你可以通过提供不同的颜色变量或者通过 TailwindCSS 直接覆盖样式来定制面包屑。

<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 属性

属性名	类型	默认值	说明
separatorType	`'icon' \| 'text'`	`'icon'`	分隔符类型
separator	`string`	`'ChevronRight'`	分隔符内容(图标名或字符串)

BrBreadcrumbItem 属性

属性名	类型	默认值	说明
class	`any`	-	自定义类名

BrBreadcrumbLink 属性

属性名	类型	默认值	说明
as	`string`	`'a'`	渲染的 HTML 标签
href	`string`	-	链接地址
to	`any`	-	Vue Router 跳转目标
state	`'default' \| 'active' \| 'disabled'`	`'default'`	激活/禁用状态

BrBreadcrumbSeparator 属性

属性名	类型	默认值	说明
separator	`string`	-	局部覆盖分隔符

#面包屑 (Breadcrumb)

#组件特性

#基础用法

#自定义分隔符

#响应式折叠与下拉菜单

#禁用项与状态

#主题定制

#API

#BrBreadcrumb 属性

#BrBreadcrumbItem 属性

#BrBreadcrumbLink 属性

#BrBreadcrumbSeparator 属性