View on GitHub

麵包屑 (Breadcrumb)

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

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

On this page

範例

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

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

<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 變數來應用它。

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" 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: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

也可以透過設定 --bs-breadcrumb-divider: ''; 來移除分隔符（CSS 自定義屬性中的空字串作為值），或是將 Sass 變數設置為 $breadcrumb-divider: none;。

<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 Authoring Practices for the breadcrumb pattern 取得更多資訊。

Sass

Variables

$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;