Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

Broodkruimel

Jou de lokaasje fan de aktuele side oan binnen in navigaasjehierarchy dy't automatysk skiedingstekens tafoegje fia CSS.

Foarbyld

Brûk in oardere of net-oardere list mei keppele listitems om in minimaal stylige breadcrumb te meitsjen. Brûk ús nutsbedriuwen om ekstra stilen ta te foegjen as jo wolle.

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

Dividers

Dividers wurde automatysk tafoege yn CSS troch ::beforeen content. Se kinne feroare wurde troch it feroarjen fan in lokale CSS oanpaste eigenskip --bs-breadcrumb-divider, of fia de $breadcrumb-dividerSass fariabele - en $breadcrumb-divider-flippedfoar syn RTL-tsjinhinger, as nedich. Wy standert op ús Sass-fariabele, dy't is ynsteld as in fallback nei it oanpaste eigenskip. Op dizze manier krije jo in globale divider dy't jo op elk momint kinne oerskriuwe sûnder CSS opnij te kompilearjen.

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

By it wizigjen fia Sass is de quote -funksje nedich om de quotes om in tekenrige te generearjen. As jo ​​​​bygelyks >as divider brûke, kinne jo dit brûke:

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

It is ek mooglik om in ynbêde SVG-ikoan te brûken . Tapasse it fia ús oanpaste CSS-eigenskip, of brûk de Sass-fariabele.

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

Jo kinne ek fuortsmite de divider ynstelling --bs-breadcrumb-divider: '';(lege snaren yn CSS oanpaste eigenskippen telt as in wearde), of set de Sass fariabele oan $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;

Tagonklikheid

Om't breadcrumbs in navigaasje leverje, is it in goed idee om in sinfol label ta te foegjen, lykas aria-label="breadcrumb"om it type navigaasje te beskriuwen dat yn it <nav>elemint wurdt levere, en ek in oan te passen aria-current="page"op it lêste item fan 'e set om oan te jaan dat it de hjoeddeistige side fertsjintwurdiget.

Sjoch foar mear ynformaasje de WAI-ARIA Authoring Practices foar it breadcrumb-patroan .

Sass

Fariabelen

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