Serbuk roti

Nyatakan lokasi halaman semasa dalam hierarki navigasi yang secara automatik menambah pemisah melalui CSS.

Pada halaman ini

Contoh

Gunakan senarai tersusun atau tidak tersusun dengan item senarai terpaut untuk mencipta serbuk roti gaya minimum. Gunakan utiliti kami untuk menambah gaya tambahan seperti yang dikehendaki.

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

Pembahagi

Pembahagi ditambah secara automatik dalam CSS melalui ::beforedan content. Ia boleh diubah dengan mengubah suai sifat tersuai CSS setempat --bs-breadcrumb-divider, atau melalui $breadcrumb-dividerpembolehubah Sass — dan $breadcrumb-divider-flippeduntuk rakan sejawatannya RTL, jika perlu. Kami lalai kepada pembolehubah Sass kami, yang ditetapkan sebagai sandaran kepada sifat tersuai. Dengan cara ini, anda mendapat pembahagi global yang boleh anda ganti tanpa menyusun semula CSS pada bila-bila masa.

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

Apabila mengubah suai melalui Sass, fungsi petikan diperlukan untuk menjana petikan di sekeliling rentetan. Sebagai contoh, menggunakan >sebagai pembahagi, anda boleh menggunakan ini:

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

Anda juga boleh menggunakan ikon SVG terbenam . Gunakannya melalui sifat tersuai CSS kami atau gunakan pembolehubah 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 boleh mengalih keluar tetapan pembahagi --bs-breadcrumb-divider: '';(rentetan kosong dalam sifat tersuai CSS dikira sebagai nilai), atau menetapkan pembolehubah Sass kepada $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;

Kebolehcapaian

Memandangkan serbuk roti menyediakan navigasi, adalah idea yang baik untuk menambah label yang bermakna seperti aria-label="breadcrumb"untuk menerangkan jenis navigasi yang disediakan dalam <nav>elemen, serta menggunakan aria-current="page"item terakhir set untuk menunjukkan bahawa ia mewakili halaman semasa.

Untuk maklumat lanjut, lihat Amalan Pengarangan WAI-ARIA untuk corak serbuk roti .

Sass

Pembolehubah

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