2023/1/5 晚上9:22 麵包屑 (Breadcrumb) · Bootstrap 5 繁體中文文件 - 六角學院 v5.

Search docs... Ctrl + / v5.0

View on GitHub

麵包屑 (Breadcrumb)
指示當前頁面在導航層次結構中的位置，該導航層次結構通過 CSS 自
動添加分隔符。

On this page

範例
分隔符
親和性
Sass
Variables

範例
使用帶有連結的有序項目列表或無序項目列表來建立樣式單純​​的麵包屑。根據需要來增加額外的通
用類別樣式。

Home

Home / Library

Home / Library / Data

<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>
https://bootstrap5.hexschool.com/docs/5.0/components/breadcrumb/ 1/5
2023/1/5 晚上9:22 麵包屑 (Breadcrumb) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0

</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 中。可以透過修改本地 CSS 自定義屬性 --
bs-breadcrumb-divider 或 $breadcrumb-divider Sass 變數來改變，如有需要還可以透過
$breadcrumb-divider-flipped 的 RTL 對應項。預設使用 Sass 變數為自定義屬性的備案。這樣您將
獲得一個全域分隔符，並且無需重新編譯 CSS 就能覆蓋該分隔符。

Home > Library

<nav style="--bs-breadcrumb-divider: '>';" 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>

當使用 Sass 進行更動時，需要使用 quote 函式生成字串周圍的引號。例如，> 用作分隔符：

$breadcrumb-divider: quote(">");

也可以使用嵌入式 SVG 圖示。通過我們的 CSS 自定義屬性，或是使用 Sass 變數來應用它。

Home Library

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www

<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>

https://bootstrap5.hexschool.com/docs/5.0/components/breadcrumb/ 2/5
2023/1/5 晚上9:22 麵包屑 (Breadcrumb) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0

<li class="breadcrumb-item active" aria-current="page">Library</li>

</ol>
</nav>

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi

也可以透過設定 --bs-breadcrumb-divider: ''; 來移除分隔符（CSS 自定義屬性中的空字串作為

值），或是將 Sass 變數設置為 $breadcrumb-divider: none;。

Home Library

<nav style="--bs-breadcrumb-divider: '';" 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>

$breadcrumb-divider: none;

親和性
由於麵包屑提供了導航功能，所以增加一個有意義的標籤像是 aria-label="breadcrumb" 來描述
<nav> 元素的導航說明，以及應用 aria-current="page" 到此群組的最後一個項目，表示這是當前頁
面。

有關更多信息，請參閱 WAI-ARIA 麵包屑模式的實踐。

Sass

Variables

https://bootstrap5.hexschool.com/docs/5.0/components/breadcrumb/ 3/5
2023/1/5 晚上9:22 麵包屑 (Breadcrumb) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0

$breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: .5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: null;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-600;
$breadcrumb-divider: quote("/");
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;

Bootstrap
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.

Code licensed MIT, docs CC BY 3.0.

Currently v5.0.0.

Links Guides
Home Getting started

Docs Starter template

Examples Webpack

Themes Parcel
Blog

https://bootstrap5.hexschool.com/docs/5.0/components/breadcrumb/ 4/5