Broodkrummel

Dui die huidige bladsy se ligging binne 'n navigasiehiërargie aan wat outomaties skeiers byvoeg via CSS.

Op hierdie bladsy

Voorbeeld

Gebruik 'n geordende of ongeordende lys met gekoppelde lysitems om 'n minimale styl broodkrummels te skep. Gebruik ons nutsprogramme om bykomende style by te voeg soos jy wil.

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

Verdelers

Verdelers word outomaties bygevoeg in CSS deur ::beforeen content. Hulle kan verander word deur 'n plaaslike CSS-pasgemaakte eiendom te wysig --bs-breadcrumb-divider, of deur die $breadcrumb-dividerSass-veranderlike - en $breadcrumb-divider-flippedvir sy RTL-eweknie, indien nodig. Ons gebruik standaard ons Sass-veranderlike, wat gestel is as 'n terugval na die pasgemaakte eiendom. Op hierdie manier kry jy 'n globale verdeler wat jy kan ignoreer sonder om CSS te eniger tyd te hersaamstel.

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

Wanneer jy via Sass wysig, word die aanhalingsfunksie vereis om die aanhalings rondom 'n string te genereer. As u byvoorbeeld >as die verdeler gebruik, kan u dit gebruik:

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

Dit is ook moontlik om 'n ingebedde SVG-ikoon te gebruik . Pas dit toe via ons CSS-pasgemaakte eiendom, of gebruik die Sass-veranderlike.

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

Jy kan ook die verdelerinstelling verwyder --bs-breadcrumb-divider: '';(leë stringe in CSS-gepasmaakte eienskappe tel as 'n waarde), of die Sass-veranderlike stel 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;

Toeganklikheid

Aangesien broodkrummels 'n navigasie verskaf, is dit 'n goeie idee om 'n betekenisvolle etiket by te voeg aria-label="breadcrumb"om die tipe navigasie wat in die <nav>element verskaf word te beskryf, asook om 'n aria-current="page"op die laaste item van die stel toe te pas om aan te dui dat dit die huidige bladsy verteenwoordig.

Vir meer inligting, sien die WAI-ARIA Skrywerpraktyke vir die broodkrummelpatroon .

Sass

Veranderlikes

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