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.

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

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

Prilikom modifikacije putem 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.

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

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

<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 WAI-ARIA autorske prakse za obrazac krušnih mrvica .

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;