面包屑导航

在导航结构中通过 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>

更改分隔符

通过 ::beforecontent 自动在CSS中添加分隔符。 可以更改 $breadcrumb-divider 来调整它们的行为。 需要引用函数来生成字符串周围的引号,因此如果您想要 > 作为分隔符,你可以使用:

$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创作实践。