面包屑 (Breadcrumb)
显示当前页面在系统层级结构中的位置，并能向上返回。基于 BrConfigProvider 实现全局主题配置，支持响应式折叠和自定义分隔符。
基础用法
最基础的面包屑导航。
Example
自定义分隔符
你可以通过全局属性或通过 BrBreadcrumbSeparator 传递插槽来自定义分隔符。
Example
响应式折叠与下拉菜单
当面包屑过长时，可以使用 BrBreadcrumbEllipsis 并结合下拉菜单（如 DropdownMenu 或原生实现）来进行折叠展示。这里以基础视觉折叠效果为例。
Example
禁用项与状态
通过设置 state 属性可以控制面包屑的状态，如 active 表示当前页，disabled 表示禁用不可点击。
Example
主题定制
面包屑组件深度集成了 BrConfigProvider。你可以通过提供不同的颜色变量或者通过 TailwindCSS 直接覆盖样式来定制面包屑。
Example
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 | - | 局部覆盖分隔符 |