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.

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

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>

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.

Korištenje ugrađenog SVG-a

Umetanje SVG-a kao podatkovnog URI-ja zahtijeva da URL izbjegne nekoliko znakova, ponajviše <, >i #. Zato se $breadcrumb-dividervarijabla prosljeđuje kroz našu escape-svg()Sass funkciju . Kada koristite prilagođeno svojstvo CSS-a, morate sami izbjeći svoj SVG URL. Pročitajte objašnjenja Kevina Webera na CodePen- u za detaljne informacije o tome što 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 računaju se kao vrijednost) ili postaviti Sass varijablu 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

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 ARIA Authoring Practices Guide uzorak putanje .

CSS

Varijable

Dodano u v5.2.0

Kao dio Bootstrapovog pristupa CSS varijablama koji se razvija, breadcrumbs sada koriste lokalne CSS varijable .breadcrumbza poboljšanu prilagodbu u stvarnom vremenu. Vrijednosti za CSS varijable postavljaju se putem Sass-a, tako da je i dalje podržana prilagodba Sass-a.

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