组件 · 导航 · 原生 HTML 与 React
面包屑 Breadcrumbs
当前页在哪:一行路径;data-collapse="4" 时中间几级折进「…」菜单。
演示
<ol class="xxd-breadcrumbs" data-collapse="4"><li><a href="#">首页</a></li><li><a href="#">插件</a></li><li><a href="#">长文发布</a></li><li><a href="#">版本</a></li><li><a href="#">1.8</a></li><li aria-current="page">1.8.2</li></ol>export function BreadcrumbsDemo() {
return (
<Breadcrumbs>
<Breadcrumbs.Link href="#">设置</Breadcrumbs.Link>
<Breadcrumbs.Separator />
<Breadcrumbs.Current>外观</Breadcrumbs.Current>
</Breadcrumbs>
);
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-collapse | 超过 N 项(缺省 4)时中间折叠成「…」菜单 |
| data-size | sm |
| 类名 | xxd-breadcrumbs xxd-breadcrumbs__more |
键盘与读屏
- 外层 <nav aria-label="面包屑">;当前页写 aria-current="page",不做成链接
- 折叠按钮的 aria-label 写清还有几级,菜单项可用方向键