Drobtina

Označite lokacijo trenutne strani znotraj navigacijske hierarhije, ki samodejno doda ločila prek CSS.

Na tej strani

Primer

Uporabite urejen ali neurejen seznam s povezanimi elementi seznama, da ustvarite minimalistično oblikovano pot. Uporabite naše pripomočke za dodajanje dodatnih slogov 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>

Razdelilniki

Razdelilniki so samodejno dodani v CSS prek ::beforein content. Lahko jih spremenite tako, da spremenite lokalno lastnost po meri CSS --bs-breadcrumb-dividerali prek $breadcrumb-dividerspremenljivke Sass — in $breadcrumb-divider-flippedza njen dvojnik RTL, če je potrebno. Privzeto uporabljamo spremenljivko Sass, ki je nastavljena kot nadomestna lastnost po meri. Na ta način dobite globalni delilnik, ki ga lahko kadar koli preglasite brez ponovnega prevajanja CSS.

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

Pri spreminjanju prek Sass je potrebna funkcija narekovajev za ustvarjanje narekovajev okoli niza. Na primer, če uporabite >kot delilnik, lahko uporabite to:

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

Možna je tudi uporaba vdelane ikone SVG . Uporabite ga prek naše lastnosti po meri CSS ali uporabite spremenljivko 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");

Prav tako lahko odstranite nastavitev delilnika --bs-breadcrumb-divider: '';(prazni nizi v lastnostih po meri CSS štejejo kot vrednost) ali nastavite spremenljivko 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;

Dostopnost

Ker drobtinice zagotavljajo navigacijo, je dobro dodati smiselno oznako, aria-label="breadcrumb"ki opisuje vrsto navigacije, ki je na voljo v <nav>elementu, in uporabiti aria-current="page"za zadnji element nabora, ki označuje, da predstavlja trenutno stran.

Za več informacij si oglejte avtorske prakse WAI-ARIA za vzorec drobtinic .

Sass

Spremenljivke

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