面包屑导航

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

面包屑导航通过提供返回起始页面的面包屑轨迹,帮助用户了解他们在网站中所处的位置。

与分隔符一同显示的链接

要求

这些项通常以行内方式显示,并带有分隔符,以指示各个页面之间的层次结构。

指南

备注: 上述示例使用了两个选择器来向每个除了首项 li 元素以外插入内容。也可以仅用一个选择器达到目标:

css
.breadcrumb li:not(:first-child)::before {
  content: "→";
}

这种解决方案使用了更加复杂的选择器,但所需规则较少。你可以自由选择更想要的解决方案。

做出选择

这种模式使用一个简单的弹性布局摆布,展示了一行 CSS 如何为我们提供导航。分隔符是由 CSS 内容生成属性添加的,你也可以将其换成其他想要的分隔符(样式)。

无障碍考虑

我使用了 aria-labelaria-current (en-US) 属性来帮助用户理解这个导航的结构,以及当前页面在结构中的位置。详情请参见相关链接。

注意通过 content 添加的箭头 也会暴露在屏幕阅读器或盲文显示器中。

浏览器兼容性

BCD tables only load in the browser

参见