面包屑 Breadcrumb

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

基本用法

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

分隔符

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

分隔符隐藏

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

自定义分隔符插槽

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

路由跳转

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

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

无障碍与语义

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

API

CBreadcrumb Props

属性名	说明	类型	可选值	默认值
separator	分隔符类型或自定义字符	string	'slash' / 'arrow'	'slash'
ariaLabel	导航标签说明，用于无障碍访问	string	—	'Breadcrumb'

CBreadcrumbItem Props

属性名	说明	类型	可选值	默认值
label	显示文本（也可通过默认插槽自定义）	string	—	''
to	目标路由或链接地址	string | RouteLocationRaw	—	''
replace	是否替换当前历史记录	boolean	—	false
disabled	是否禁用链接行为	boolean	—	false

CBreadcrumbItem Events

事件名	说明	回调参数
click	点击面包屑项时触发	(event: MouseEvent)

CBreadcrumbItem Slots

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

CBreadcrumbItem Methods

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

无障碍支持

面包屑组件遵循 WAI-ARIA 规范，提供完整的无障碍支持：

属性	说明
aria-label	通过 ariaLabel 属性设置导航区域的语义标签
aria-current	自动在最后一项设置为 'page'，标识当前页面
aria-disabled	在禁用项上设置为 'true'，标识不可操作状态
语义化标签	使用 <nav> + <ol> + <li> 结构，符合标准