在 GitHub 上檢視
麵包屑
透過 CSS 自動新增分隔符號，指出當前頁面在導覽層級中的位置。
範例
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>變更分隔符號
分隔符號會透過 ::before 和 content 在 CSS 中自動新增。可以透過變更 $breadcrumb-divider 來變更分隔符號。需要 引號 函數來產生字串周圍的引號，因此如果您想要 > 作為分隔符號，可以使用以下程式碼
$breadcrumb-divider: quote(">");
也可以使用內嵌 SVG 圖示的 base64
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
可以將 $breadcrumb-divider 設為 none 來移除分隔符號
$breadcrumb-divider: none;
無障礙
由於麵包屑提供導覽功能，因此建議新增有意義的標籤，例如 aria-label="breadcrumb" 來描述 <nav> 元素中提供的導覽類型，以及將 aria-current="page" 套用至集合中的最後一個項目，以指出它代表當前頁面。