Breadcrumb

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

Na ovoj stranici

Primjer

Upotrijebite uređeni ili neuređeni popis s povezanim stavkama popisa za stvaranje minimalistički stiliziranog puta. Koristite naše pomoć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 putem ::beforei content. Mogu se promijeniti modificiranjem lokalnog prilagođenog svojstva CSS -a --bs-breadcrumb-dividerili putem $breadcrumb-dividervarijable Sass — i $breadcrumb-divider-flippedza njenu RTL kopiju, ako je potrebno. Zadano koristimo našu varijablu Sass, koja je postavljena kao zamjena za prilagođeno svojstvo. Na ovaj način dobivate globalni razdjelnik koji možete nadjačati bez ponovnog kompiliranja 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 izmjene putem Sass-a, funkcija citata je potrebna za generiranje navodnika oko niza. Na primjer, koristeći >kao razdjelnik, možete koristiti ovo:

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

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

<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 računaju se kao vrijednost) ili postaviti Sass varijablu 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

S obzirom na to da putevi pružaju navigaciju, dobra je ideja dodati smislenu oznaku aria-label="breadcrumb"koja opisuje vrstu navigacije u <nav>elementu, kao i primijeniti aria-current="page"na posljednju stavku skupa da naznači da predstavlja trenutnu stranicu.

Za više informacija, pogledajte WAI-ARIA autorske prakse za uzorak putanje .

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;