麵包屑

關於麵包屑

麵包屑標示的是目前正在瀏覽的頁面在整個網站架構中的位置。他看起來像是個可以回到首頁的路徑，指引出若想要回到首頁，中間會經過的各個頁面。使用者也可以直接從麵包屑上直接回到首頁，不必透過「回上頁」一層層回溯。麵包屑的主要功能是導航用，協助使用者在除了導覽列以外的輔助性導覽機制。

使用規範

何時該使用麵包屑

• 網站架構佔有某種重要的意義。 有時候使用者是透過站內搜尋或是外部連結到達網站內的某一頁面，當這個頁面是存在與整個網站的介曾架構，且其架構涵有其本質上的意義時，適合使用麵包屑來輔助導航。
• 輔助導航。 麵包屑的存在可以幫助使用者更直接的了解整個網站的層級架構，特別在規模較大、層級較為複雜的網站，妥善地使用麵包屑可以加強宣導網站的架構與期規劃背後的邏輯。

何時該考慮使用其他元件

• 簡易網站。 當網站是非常簡單的架構時，使用麵包屑的意義不大。
• 首頁。 首頁不適合使用麵包屑。
• 導覽元件清楚。 網頁導覽已經非常清楚時，使用麵包屑的意義不大。
• 顯示連貫步驟。 若是要顯示第一步驟、第二步驟這樣的線性動作，請考慮使用 stepper 類型的元件。麵包屑適合的是層級關係的展現，不是線性動作的說明。

近用性

• 用 <nav> 標籤，易於讀報軟體閱讀。
• 在 <nav> 裡面加 aria-label="Breadcrumbs"，當頁加上 aria-current="page"
• 用 aria-label="true" 將分隔器隱藏，不讓讀報軟體讀到。

元件設計

基本麵包屑 Basic Breadcrumb

基本麵包屑從首頁開始，顯示從首頁到當前頁面的路徑，並用分隔器隔開。當前頁面是不可點的。

<div class="row">
  <div class="col">
    <nav aria-label="breadcrumb" aria-label="Breadcrumbs">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首頁</a></li>
        <li class="breadcrumb-item"><a href="#">學習專區</a></li>
        <li class="breadcrumb-item active" aria-current="page">公務人員人力訓練初階課程</li>
      </ol>
    </nav>
  </div>
</div>