跳至主要内容

文档

面包屑导航

创建面包屑导航，以显示用户在网站中的位置。

用法

面包屑导航组件由链接组成，这些链接并排排列，并用分隔符隔开。将 .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="Breadcrumb">
    <ul class="uk-breadcrumb">…</ul>
</nav>