在导航结构中通过 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>
通过 ::before
和 content
自动在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创作实践。