依賴項
透過內聯連結顯示網站的層級結構，專案之間有分隔符，指示各個頁面之間的層級關係，當前頁面顯示在最後。
示例
點選下面程式碼塊中的“Play”按鈕，在 MDN Playground 中編輯示例。
html
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Sub Category</a></li>
<li><a href="#">Type</a></li>
<li><span aria-current="page">Product</span></li>
</ol>
</nav>
css
body {
font: 1.2em sans-serif;
}
.breadcrumb {
padding: 0 0.5rem;
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
align-items: end;
}
.breadcrumb li:not(:last-child)::after {
display: inline-block;
margin: 0 0.25rem;
content: "→";
}
注意： 上面的示例使用了一個複雜的選擇器，在除最後一個 li 之外的每個 li 之前插入內容。這也可以透過使用一個複雜的選擇器來針對除第一個 li 之外的所有 li 元素來實現。
css
.breadcrumb li:not(:first-child)::before {
content: "→";
}
請隨意選擇您喜歡的解決方案。
已做出的選擇
為了使列表項內聯顯示，我們使用Flexbox 佈局，從而展示了一行 CSS 如何實現我們的導航。分隔符是使用CSS 生成內容新增的。您可以將這些分隔符更改為您喜歡的任何樣式。
可訪問性考慮
我們使用了 aria-label 和 aria-current 屬性來幫助輔助技術使用者理解這個導航是什麼以及當前頁面在結構中的位置。更多資訊請參閱相關連結。
請注意，透過示例中 content CSS 屬性新增的分隔符箭頭 → 會暴露給輔助技術 (AT)，包括螢幕閱讀器和盲文顯示器。為了獲得更“安靜”的解決方案，請在您的 HTML 中使用帶有空 alt 屬性的裝飾性 <img>。將 ARIA role 設定為 none 或 presentation 也會阻止影像暴露給 AT。
或者，透過包含一個空字串作為替代文字，並在其前面加上斜槓 (/)，使 CSS 生成內容靜默；例如，content: url("arrow.png") / "";。
如果包含將暴露給輔助技術 (AT) 的生成分隔符，請選擇使用 ::after 偽元素選擇器而不是 ::before 來建立生成內容，這樣分隔符內容將在 HTML 內容之後而不是之前宣佈。