前言
麵包屑（ breadcrumb ）一詞源自於童話故事——糖果屋，主角沿途在前往森林的路上放置麵包屑，即使在過程中迷路了，也能順著麵包屑找到回家的方向，而在現今網頁運用上也是一樣，麵包屑是網站的燈塔，用以指引網頁瀏覽者方向，所以對於一個多頁面網站有一定的重要性。
（ 圖片來源 ）
官方網站的 breadcrumb 頁面
基本麵包屑
麵包屑也稱為「 階層連結清單 」或「 導覽路徑 」，放置位置通常會在網站的上方，主要目的就是讓網頁瀏覽者不管到了哪個頁面，都可以經由「 麵包屑 」快速地回到該篇文章的上一層分類或首頁。
HTML
<nav aria-label="breadcrumb">
<div class="container">
<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>
</div>
</nav>
CSS
nav {
background-color: #eee;
padding: 15px 0;
}
.breadcrumb {margin-bottom: 0;}
使用帶有連結的有序項目列表 <ol> 或無序項目列表 <ul> 來建立樣式單純的麵包屑，可以根據需求來增加列表項目。
分隔符
分隔符透過 ::before 以及 content 自動被加入在 CSS 中。可以透過修改 CSS 自定義屬性 --bs-breadcrumb-divider 或 $breadcrumb-divider Sass 變數來改變。
HTML
<nav style="--bs-breadcrumb-divider: '>>>';" aria-label="breadcrumb">
<div class="container">
<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>
</div>
</nav>
CSS
nav {
background-color: #eee;
padding: 15px 0;
}
.breadcrumb {margin-bottom: 0;}
