面包屑 Breadcrumb

用于展示当前页面的层级路径，方便用户在层级结构中导航和返回上一级。

基本用法

使用 CBreadcrumb 包裹多个 CBreadcrumbItem，通过默认插槽或 label 指定文本。

vue

<c-breadcrumb>
  <c-breadcrumb-item>首页</c-breadcrumb-item>
  <c-breadcrumb-item>文档</c-breadcrumb-item>
  <c-breadcrumb-item>组件</c-breadcrumb-item>
</c-breadcrumb>

分隔符

通过 separator 控制分隔符：slash、arrow 或任意字符串。

vue

<c-breadcrumb separator="arrow">
  <c-breadcrumb-item>首页</c-breadcrumb-item>
  <c-breadcrumb-item>列表</c-breadcrumb-item>
  <c-breadcrumb-item>详情</c-breadcrumb-item>
</c-breadcrumb>

分隔符隐藏

最后一个子项的分隔符会自动隐藏，同时为最后项添加 aria-current="page"，提高语义化与可访问性。

自定义分隔符插槽

你可以在 CBreadcrumbItem 上使用名为 separator 的插槽自定义分隔符内容：

vue

<c-breadcrumb>
  <c-breadcrumb-item>
    首页
    <template #separator>•</template>
  </c-breadcrumb-item>
  <c-breadcrumb-item>
    列表
    <template #separator>•</template>
  </c-breadcrumb-item>
  <c-breadcrumb-item>详情</c-breadcrumb-item>
</c-breadcrumb>

路由跳转

CBreadcrumbItem 支持 to 和 replace 属性。当存在 vue-router 时优先通过路由跳转，否则回退到 window.location.href。

下面示例会跳转到组件文档页面（将发生整页跳转）：

vue

<c-breadcrumb>
  <c-breadcrumb-item label="Icon" to="/cui/components/icon.html" />
  <c-breadcrumb-item label="Button" to="/cui/components/button.html" :replace="true" />
  <c-breadcrumb-item label="当前页" disabled />
</c-breadcrumb>

无障碍与语义

CBreadcrumb 使用 nav + ol，并可通过 ariaLabel 指定导航语义标签。

vue

<c-breadcrumb ariaLabel="页面路径">
  <c-breadcrumb-item>一级</c-breadcrumb-item>
  <c-breadcrumb-item>二级</c-breadcrumb-item>
  <c-breadcrumb-item>三级</c-breadcrumb-item>
</c-breadcrumb>

API

CBreadcrumb Props

属性	类型	默认值	说明
separator	`string \| 'slash' \| 'arrow'`	`'slash'`	分隔符类型或自定义字符，可选值：`'slash'`（/）、`'arrow'`（>）或任意字符串
ariaLabel	`string`	`'Breadcrumb'`	导航标签说明，用于无障碍访问

CBreadcrumbItem Props

属性	类型	默认值	说明
label	`string`	`''`	显示文本，也可以通过默认插槽自定义内容
to	`string \| RouteLocationRaw`	`''`	目标路由或链接地址，支持字符串或路由对象
replace	`boolean`	`false`	是否替换当前历史记录，而不是添加新记录
disabled	`boolean`	`false`	是否禁用链接行为，禁用后不可点击

CBreadcrumbItem Slots

插槽名	说明	参数
default	自定义面包屑项内容	-
separator	自定义分隔符内容	-

CBreadcrumbItem Methods

方法名	说明	参数	返回值
navigate	手动触发导航跳转	`(event: MouseEvent)`	`void`

可访问性

属性	说明
`aria-current`	自动在最后一项设置为 `'page'`，标识当前页面
`aria-disabled`	在禁用项上设置为 `'true'`，标识不可操作状态

面包屑 Breadcrumb ​

基本用法 ​

分隔符 ​

分隔符隐藏 ​

自定义分隔符插槽 ​

路由跳转 ​

无障碍与语义 ​

API ​

CBreadcrumb Props ​

CBreadcrumbItem Props ​

CBreadcrumbItem Slots ​

CBreadcrumbItem Methods ​

可访问性 ​