in English

Лебна трошка

Наведете ја локацијата на тековната страница во рамките на навигациската хиерархија која автоматски додава сепаратори преку CSS.

На оваа страница

Пример

Користете подредена или неподредена листа со поврзани ставки од списокот за да создадете минимално стилизирана презла. Користете ги нашите алатки за да додадете дополнителни стилови по желба.

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

Разделувачи

Разделувачите автоматски се додаваат во CSS преку ::beforeи content. Тие можат да се променат со менување на локалната сопствена CSS --bs-breadcrumb-dividerили преку $breadcrumb-dividerпроменливата Sass - и $breadcrumb-divider-flippedза нејзиниот RTL пандан, доколку е потребно. Стандардно ја поставуваме нашата Sass променлива, која е поставена како резервна копија на приспособеното својство. На овој начин, добивате глобален делител што можете да го отфрлите без повторно компајлирање 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>

Кога се менувате преку Sass, функцијата quote е потребна за генерирање на наводници околу низа. На пример, користејќи >како делител, можете да го користите ова:

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

Исто така, можно е да се користи вградена икона SVG . Применете го преку нашата сопствена приспособена CSS или користете ја променливата 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");

Можете исто така да ја отстраните поставката за делител --bs-breadcrumb-divider: '';(празни низи во сопствените својства на CSS се бројат како вредност) или да ја поставите променливата 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;

Пристапност

Бидејќи лебните трошки обезбедуваат навигација, добра идеја е да додадете значајна етикета како што е aria-label="breadcrumb"да се опише типот на навигација обезбедена во <nav>елементот, како и да се примени знак aria-current="page"на последната ставка од сетот за да се покаже дека ја претставува тековната страница.

За повеќе информации, видете ги практиките за авторизирање на WAI-ARIA за шемата за презла .

Сас

Променливи

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