F2E合作社｜麵包屑｜Bootstrap 5網頁框架開發入門

前言

麵包屑（ 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;}

參考資料

1. Breadcrumb · Bootstrap v5.0
2. 麵包屑 (Breadcrumb) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
3. 什麼是麵包屑(Breadcrumbs)?
4. 麵包屑與路徑列-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學