导航路径

导航路径方便用户点击浏览您的网站时显示导航轨迹。

要创建一组导航路径链接，只需将 .breadcrumbs 类添加到 <ul>，然后在 <li> 元素内添加链接。当前页面不需要链接或类，但您应该为 AT 添加一些说明性文本来指示哪个项目是当前页面。

要标记禁用的项目，请将 .disabled 类添加到 <li>，并使用纯文本而不是链接。

在视频中观看此部分

我们使用包含斜杠字符的 CSS ::after 元素在项目之间创建分隔符。某些屏幕阅读器会大声读出此字符 - 如果这是一个问题，您可以使用背景图像或带有 aria-hidden="true" 的单独元素来创建分隔符。

如果您的网站被搜索引擎访问，那么您应该考虑添加 Schema.org 结构化数据。这将使您的网站在搜索结果中更具吸引力。

有关更多信息，请参阅导航路径 - Google Developers，BreadcrumbList - schema.org。

<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li class="disabled">Gene Splicing</li>
    <li>
      <span class="show-for-sr">Current: </span> Cloning
    </li>
  </ul>
</nav>

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$breadcrumbs-margin`	数字	`0 0 $global-margin 0`	导航路径容器周围的边距。
`$breadcrumbs-item-font-size`	数字	`rem-calc(11)`	导航路径链接的字体大小。
`$breadcrumbs-item-color`	颜色	`$primary-color`	导航路径链接的颜色。
`$breadcrumbs-item-color-current`	颜色	`$black`	活动导航路径链接的颜色。
`$breadcrumbs-item-color-disabled`	数字	`$medium-gray`	禁用导航路径链接的不透明度。
`$breadcrumbs-item-margin`	数字	`0.75rem`	导航路径项目之间的边距。
`$breadcrumbs-item-uppercase`	布尔值	`true`	如果为 `true`，则将导航路径链接设为大写。
`$breadcrumbs-item-separator`	布尔值	`true`	如果为 `true`，则在导航路径链接之间添加分隔符。
`$breadcrumbs-item-separator-item`	内容	`'/'`	用于导航路径分隔符的字符。
`$breadcrumbs-item-separator-item-rtl`	内容	`'\\'`	在 rtl 模式下用于导航路径分隔符的字符。
`$breadcrumbs-item-separator-color`	颜色	`$medium-gray`	导航路径项目的颜色。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用混合来构建我们组件的类结构。

breadcrumbs-container

@include breadcrumbs-container;

为导航路径容器添加样式，以及为其中的 <li> 和 <a> 元素添加样式。