面包屑 | Breadcrumb

Breadcrumb

在通过 CSS 自动添加分隔符的导航层次结构中指示当前页面的位置。

概观

分隔符通过::before和content自动添加到CSS中。

<nav aria-label="breadcrumb" role="navigation">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb" role="navigation">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb" role="navigation">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

无障碍

由于breadcrumbs提供导航，因此最好添加一个有意义的标签，例如aria-label="breadcrumb"描述<nav>元素中提供的导航类型，并将该元素应用于aria-current="page"该集合的最后一项，以表示它代表当前页面。

有关更多信息，请参阅 breadcrumb模式 WAI-ARIA创作实践。