Breadcrumb

Označite lokaciju trenutne stranice unutar navigacijske hijerarhije koja automatski dodaje separatore putem CSS-a.

Na ovoj stranici

Primjer

Koristite uređenu ili neuređenu listu sa povezanim stavkama liste za kreiranje minimalno stilizovane krušne mrvice. Koristite naše uslužne programe za dodavanje dodatnih stilova po želji.

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>

Razdjelnici

Razdjelnici se automatski dodaju u CSS kroz ::beforei content. Mogu se mijenjati modifikacijom lokalnog CSS prilagođenog svojstva --bs-breadcrumb-divider, ili putem $breadcrumb-dividervarijable Sass — i $breadcrumb-divider-flippedza njegov RTL pandan, ako je potrebno. Zadano koristimo našu varijablu Sass, koja je postavljena kao rezervni za prilagođeno svojstvo. Na ovaj način dobijate globalni razdjelnik koji možete zamijeniti bez ponovnog kompajliranja CSS-a u bilo kojem trenutku.

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>

Kada se modificira preko Sass-a, funkcija navodnika je potrebna za generiranje navodnika oko niza. Na primjer, koristeći >kao razdjelnik, možete koristiti ovo:

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

Takođe je moguće koristiti ugrađenu SVG ikonu . Primijenite ga putem našeg CSS prilagođenog svojstva ili koristite varijablu Sass.

Korištenje ugrađenog SVG-a

Umetanje SVG-a kao URI-ja podataka zahtijeva da URL pobjegne nekoliko znakova, prije svega <, >i #. Zato se $breadcrumb-dividervarijabla prenosi kroz našu escape-svg()Sass funkciju . Kada koristite CSS prilagođeno svojstvo, morate sami da izbjegnete URL iz vašeg SVG-a. Pročitajte objašnjenja Kevina Webera o CodePenu za detaljne informacije o tome od čega pobjeći.

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

Također možete ukloniti postavku razdjelnika --bs-breadcrumb-divider: '';(prazni nizovi u CSS prilagođenim svojstvima se računaju kao vrijednost) ili postaviti varijablu Sass na $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;

Pristupačnost

Budući da krušne mrvice pružaju navigaciju, dobra je ideja dodati smislenu oznaku kao što aria-label="breadcrumb"bi opisala tip navigacije koji se nalazi u <nav>elementu, kao i primjenu znaka aria-current="page"na posljednju stavku skupa kako bi se naznačilo da ona predstavlja trenutnu stranicu.

Za više informacija, pogledajte ARIA vodič za autorske prakse .

CSS

Varijable

Dodato u v5.2.0

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, breadcrumbs sada koriste lokalne CSS varijable .breadcrumbza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

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

Sass varijable

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