麵包屑 (Breadcrumb)
- 新提案
- →
- 封閉測試
- →
- 公開測試
- →
- 已穩定
成熟度說明
- 新提案：未完成開發、請勿使用。
- 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
- 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
- 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。
說明
- 麵包屑（Breadcrumb）導航幫助使用者理解網站的多個層級並可在其之間移動，也有顯示使用者在目前網站中位置的作用。
- 麵包屑元件不適合套用在扁平結構的網站。
斜線分隔
HTML
<nav aria-label="麵包屑" class="breadcrumb">
<ol>
<li>
<a href="/">首頁</a>
</li>
<li>
<a href="/components/index.html">共用元件</a>
</li>
<li>
<a href="" aria-current="page">麵包屑 (Breadcrumb)</a>
</li>
</ol>
</nav>箭頭分隔
HTML
<nav aria-label="麵包屑" class="breadcrumb arrow-separator">
<ol>
<li>
<a href="/">首頁</a>
</li>
<li>
<a href="/components/index.html">共用元件</a>
</li>
<li>
<a href="" aria-current="page">麵包屑 (Breadcrumb)</a>
</li>
</ol>
</nav>CSS
.arrow-separator：頁面的分隔改用 V 型符號表示，預設為斜線。
親和力
- 使用 nav 元素，讓麵包屑成為頁面地標架構，進而可以被更簡單的被定位。
- 使用 aria-label 屬性，填寫的「文字內容」作為麵包屑的標題，在瀏覽器中是不可見的，但螢幕報讀軟體（又稱為螢幕閱讀器）會朗讀。
- 針對目前所在連結（通常是麵包屑的最後一個項目），要加上 aria-current 屬性作為標示，值是 page，若當前所在位置只是「文字」，並非超連結的話，則此屬性為選擇性。
- 將僅作為視覺上的分隔用途的斜線或箭頭符號，用 CSS 方式渲染，以避免螢幕報讀軟體朗讀出來。