Breadcrumb
创建面包屑，向用户展示他们在网站中所处的位置。
用法
面包屑（Breadcrumb）组件由若干链接组成，它们并排排列，并以分隔符隔开。为 <ul> 元素添加 .uk-breadcrumb 类来定义该组件。列表中使用 <a> 元素作为面包屑项。最后一个 <li> 元素会自动应用激活状态。
要添加不带链接的列表项，用 <span> 元素代替 <a>。也可以禁用某个 <a> 元素：为 <li> 元素添加 .uk-disabled 类，并移除锚点的 href 属性，使其无法通过键盘导航访问。
<ul class="uk-breadcrumb">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><span></span></li>
</ul><nav aria-label="Breadcrumb">
<ul class="uk-breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Linked Category</a></li>
<li class="uk-disabled"><a>Disabled Category</a></li>
<li><span aria-current="page">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>
</nav>
可访问性
为了让面包屑组件遵循 Breadcrumb 设计模式，需要设置相应的 WAI-ARIA 角色、状态和属性。
- 将面包屑列表放在
nav元素内，并设置aria-label属性来描述所提供导航的类型。 - 如果最后一项是当前页面，设置
aria-current="page"属性。
<nav aria-label="Breadcrumb">
<ul class="uk-breadcrumb">…</ul>
</nav>