面包屑导航(Breadcrumb)

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

例子

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

<nav aria-label="breadcrumb">
  <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">
  <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>

更改分隔符

Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider. The quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this:

$breadcrumb-divider: quote(">");

也可以使用** base64嵌入式SVG图标**:

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

可以通过将$breadcrumb-divider设置为none来删除分隔符:

$breadcrumb-divider: none;

辅助功能

由于面包屑提供了导航,因此最好添加一个有意义的标签(例如aria-label =“ breadcrumb”)来描述<nav>元素中提供的导航类型,并应用aria- current =“ page”到集合的最后一项,以表示它代表当前页面。

有关更多信息,请参见WAI-ARIA Authoring Practices for the breadcrumb pattern