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.

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>

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.

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>

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.

Ngagunakeun SVG embedded

Inlining SVG salaku data URI merlukeun URL kabur sababaraha karakter, utamana <, >jeung #. Éta sababna $breadcrumb-dividervariabel dialirkeun kana escape-svg()fungsi Sass kami . Nalika nganggo sipat khusus CSS, anjeun kedah URL kabur SVG anjeun nyalira. Baca panjelasan Kevin Weber ngeunaan CodePen kanggo inpormasi anu lengkep ngeunaan naon anu kedah kabur.

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

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

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

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 ARIA Authoring Practices Guide pola breadcrumb .

CSS

Variabel

Ditambahkeun dina v5.2.0

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, breadcrumbs ayeuna nganggo variabel CSS lokal .breadcrumbpikeun kustomisasi sacara real-time anu ditingkatkeun. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

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