Skip to main content Skip to docs navigation
View on GitHub

麵包屑 (Breadcrumb)

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

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

立即上課去

範例

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

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