Remah roti

Tunjukkan lokasi halaman saat ini dalam hierarki navigasi yang secara otomatis menambahkan pemisah melalui CSS.

Di halaman ini

Contoh

Gunakan daftar terurut atau tidak berurutan dengan item daftar tertaut untuk membuat remah roti dengan gaya minimal. Gunakan utilitas kami untuk menambahkan gaya tambahan sesuai keinginan.

html

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

Jangka pembagi garis

Pembagi secara otomatis ditambahkan dalam CSS melalui ::beforedan content. Mereka dapat diubah dengan memodifikasi properti kustom CSS lokal --bs-breadcrumb-divider, atau melalui $breadcrumb-dividervariabel Sass — dan $breadcrumb-divider-flippeduntuk mitra RTL-nya, jika diperlukan. Kami default ke variabel Sass kami, yang ditetapkan sebagai fallback ke properti kustom. Dengan cara ini, Anda mendapatkan pembagi global yang dapat Anda timpa tanpa mengkompilasi ulang CSS kapan saja.

html

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

Saat memodifikasi melalui Sass, fungsi kutipan diperlukan untuk menghasilkan tanda kutip di sekitar string. Misalnya, menggunakan >sebagai pembagi, Anda dapat menggunakan ini:

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

Anda juga dapat menggunakan ikon SVG yang disematkan . Terapkan melalui properti kustom CSS kami, atau gunakan variabel Sass.

Menggunakan SVG tersemat

Menyejajarkan SVG sebagai URI data diperlukan agar URL lolos dari beberapa karakter, terutama <, >dan #. Itu sebabnya $breadcrumb-dividervariabel dilewatkan melalui escape-svg()fungsi Sass kami . Saat menggunakan properti kustom CSS, Anda harus melepaskan URL dari SVG Anda sendiri. Baca penjelasan Kevin Weber di CodePen untuk informasi mendetail tentang apa yang harus dihindari.

html

<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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

Anda juga dapat menghapus setelan pembagi --bs-breadcrumb-divider: '';(string kosong di properti kustom CSS dihitung sebagai nilai), atau menyetel variabel Sass ke $breadcrumb-divider: none;.

html

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

Aksesibilitas

Karena remah roti menyediakan navigasi, sebaiknya tambahkan label yang bermakna seperti aria-label="breadcrumb"untuk mendeskripsikan jenis navigasi yang disediakan dalam <nav>elemen, serta menerapkan an aria-current="page"ke item terakhir dari kumpulan untuk menunjukkan bahwa itu mewakili halaman saat ini.

Untuk informasi selengkapnya, lihat pola breadcrumb Panduan Praktik Penulisan ARIA .

CSS

Variabel

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, remah roti sekarang menggunakan variabel CSS lokal .breadcrumbuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

Variabel Sass

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