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.

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

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

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

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

<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 lebih lanjut, lihat WAI-ARIA Authoring Practices untuk pola breadcrumb .

Kelancangan

Variabel

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