面包屑
创建面包屑以显示用户在网站中的位置。
用法
面包屑组件由链接组成，这些链接并排对齐并用分隔符分隔。将 .uk-breadcrumb 类添加到 <ul> 元素以定义该组件。在列表中使用 <a> 元素作为面包屑项。活动状态会自动应用于最后一个 <li> 元素。
要添加没有链接的列表项，请使用 <span> 元素代替 <a>。或者，可以通过将 .uk-disabled 类添加到 <li> 元素并从锚点删除 href 属性来禁用 <a> 元素，使其无法通过键盘导航访问。
<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>
可访问性
为了使面包屑组件符合 面包屑设计模式，请设置适当的 WAI-ARIA 角色、状态和属性。
- 将面包屑列表包含在
nav元素中，并将aria-label属性设置为描述所提供的导航类型。 - 如果最后一项是当前页面，则设置
aria-current="page"属性。
<nav aria-label="Breadcrumb">
<ul class="uk-breadcrumb">…</ul>
</nav>