Duonos trupiniai

Nurodykite dabartinio puslapio vietą naršymo hierarchijoje, kuri automatiškai prideda skyriklius per CSS.

Šiame puslapyje

Pavyzdys

Naudokite sutvarkytą arba nerūšiuotą sąrašą su susietais sąrašo elementais, kad sukurtumėte minimalaus stiliaus naršymo kelią. Norėdami pridėti papildomų stilių, kaip norite, naudokite mūsų paslaugas.

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

Skirstytuvai

Skirstytuvai automatiškai pridedami CSS naudojant ::beforeir content. Juos galima pakeisti modifikuojant vietinę CSS tinkintą ypatybę --bs-breadcrumb-dividerarba naudojant $breadcrumb-dividerSass kintamąjį ir $breadcrumb-divider-flipped, jei reikia, jo RTL atitikmenį. Pagal numatytuosius nustatymus taikome mūsų Sass kintamąjį, kuris nustatytas kaip pasirinktinės nuosavybės atsarginis variantas. Tokiu būdu jūs gaunate visuotinį skirstytuvą, kurį galite nepaisyti bet kuriuo metu nekompiliuodami 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>

Keičiant naudojant Sass, citatos funkcija reikalinga kabutėms aplink eilutę sugeneruoti. Pavyzdžiui, naudodami >kaip skirstytuvą, galite naudoti tai:

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

Taip pat galima naudoti įterptąją SVG piktogramą . Taikykite jį naudodami tinkintą CSS nuosavybę arba naudokite kintamąjį 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");

Taip pat galite pašalinti skirstytuvo nustatymą --bs-breadcrumb-divider: '';(tuščios eilutės tinkintose CSS ypatybėse laikomos verte) arba nustatyti kintamąjį Sass į $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;

Prieinamumas

Kadangi naršymas suteikia naršymo funkciją, naudinga pridėti prasmingą etiketę, aria-label="breadcrumb"kuri apibūdintų elemente pateiktą naršymo tipą <nav>, taip pat aria-current="page"paskutiniam rinkinio elementui pritaikyti ženklą, nurodant, kad jis atstovauja dabartiniam puslapiui.

Norėdami gauti daugiau informacijos, žr. WAI-ARIA kūrimo praktiką, skirtą naršymo kelio modeliui .

Sass

Kintamieji

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