麵包屑

麵包屑可用於顯示使用者在網站中點擊的導覽路徑。

若要製作一組麵包屑連結，只要將類別 .breadcrumbs 加入 <ul>，然後在 <li> 元素中加入連結即可。目前的頁面不需要連結或類別，但您應該加入一些說明文字，以供輔助技術指出哪個項目為目前頁面。

若要標示已停用的項目，請將類別 .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> 元素的樣式。