Breadcrumb 设计文档
面包屑导航，展示当前页面在层级结构中的位置。字段/API 对齐 Semi：routes 元素为 Route 对象（{name, path, href, icon}）或纯字符串。支持数据驱动 routes 与声明式 Item 两种用法。
← API 文档使用建议
面包屑导航，展示当前页面在层级结构中的位置。字段/API 对齐 Semi：routes 元素为 Route 对象（{name, path, href, icon}）或纯字符串。支持数据驱动 routes 与声明式 Item 两种用法。
Accessibility
ARIA role：navigation
- nav[aria-label] 下直接放扁平 span/a（对齐 Semi，无 ol/li 列表包裹）
- 最后一项 aria-current=page，不可点击
- 无 href 的中间项用 role=link + tabindex=0 + 键盘可激活
- 分隔符 aria-hidden=true
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-breadcrumb-color | var(--cd-color-breadcrumb-default-text-default) | 面包屑根文字颜色（组件消费） |
--cd-breadcrumb-color-active | var(--cd-color-breadcrumb-active-text-default) | 当前页 / 选中项文字颜色（组件消费） |
--cd-breadcrumb-color-link | var(--cd-color-breadcrumb-default-text-default) | 可点击项文字颜色 - 常态（对齐 Semi item 常态灰，组件消费） |
--cd-breadcrumb-color-link-active | var(--cd-color-breadcrumb-default-text-active) | 可点击项文字颜色 - 按下（对齐 Semi item-link:active，组件消费） |
--cd-breadcrumb-color-link-hover | var(--cd-color-breadcrumb-default-text-hover) | 可点击项文字颜色 - 悬浮（对齐 Semi item-link:hover，组件消费） |
--cd-breadcrumb-restitem-color | var(--cd-color-breadcrumb-restitem-text-default) | 折叠 … 触发器 / restItem 文字颜色（对齐 Semi restItem，组件消费） |
--cd-breadcrumb-separator-color | var(--cd-color-breadcrumb-sepearator-default-icon-default) | 分割符颜色（组件消费） |
--cd-color-breadcrumb-active-text-active | var(--cd-color-text-0) | 面包屑文字颜色 - 选中激活 |
--cd-color-breadcrumb-active-text-default | var(--cd-color-text-0) | 面包屑文字颜色 - 选中 |
--cd-color-breadcrumb-default-text-active | var(--cd-color-link-hover) | 面包屑文字颜色 - 按下 |