Breadcrumb

Nunjukkeun lokasi kaca ayeuna dina hirarki navigasi nu otomatis nambahkeun separators via CSS.

Dina kaca ieu

Contona

Paké daptar maréntahkeun atawa unordered kalawan item daptar numbu pikeun nyieun breadcrumb gaya minimally. Anggo utilitas kami pikeun nambihan gaya tambahan anu dipikahoyong.

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

Pamisah

Dividers otomatis ditambahkeun dina CSS ngaliwatan ::beforena content. Éta tiasa dirobih ku ngarobih sipat adat CSS lokal --bs-breadcrumb-divider, atanapi ngalangkungan $breadcrumb-dividervariabel Sass - sareng $breadcrumb-divider-flippedkanggo mitra RTL na, upami diperyogikeun. Urang dituna kana variabel Sass urang, nu diatur salaku fallback kana sipat custom. Ku cara ieu, anjeun meunang hiji divider global nu bisa Anjeun override tanpa recompiling CSS iraha wae.

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

Nalika ngarobih via Sass, fungsi kutipan diperyogikeun pikeun ngahasilkeun tanda petik dina senar. Contona, ngagunakeun >salaku divider, Anjeun bisa make ieu:

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

Éta ogé tiasa nganggo ikon SVG anu dipasang . Larapkeun via sipat custom CSS kami, atawa make 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");

Anjeun oge bisa nyabut setelan divider --bs-breadcrumb-divider: '';(string kosong dina sipat custom CSS diitung salaku nilai), atawa nyetel variabel Sass ka $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

Kusabab breadcrumbs nyadiakeun navigasi a, éta mangrupakeun ide nu sae pikeun nambahkeun labél bermakna kayaning aria-label="breadcrumb"pikeun ngajelaskeun jenis navigasi disadiakeun dina <nav>unsur, kitu ogé nerapkeun hiji aria-current="page"ka item panungtungan set pikeun nunjukkeun yén éta ngagambarkeun kaca ayeuna.

Kanggo inpo nu leuwih lengkep, tingali Praktek Ngarang WAI-ARIA pikeun pola breadcrumb .

Sass

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;