Бреадцрумб

Означите локацију тренутне странице унутар хијерархије навигације која аутоматски додаје сепараторе преко ЦСС-а.

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

Пример

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

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

Разделници

Разделници се аутоматски додају у ЦСС преко ::beforeи content. Могу се променити модификацијом локалног ЦСС прилагођеног својства --bs-breadcrumb-dividerили преко $breadcrumb-dividerСасс променљиве — и $breadcrumb-divider-flippedза њен РТЛ пар, ако је потребно. Подразумевано користимо нашу променљиву Сасс, која је постављена као резервни део прилагођеног својства. На овај начин добијате глобални разделник који можете заменити без поновног компајлирања ЦСС-а у било ком тренутку.

<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: quote(">");

Такође је могуће користити уграђену СВГ икону . Примените га преко нашег ЦСС прилагођеног својства или користите променљиву Сасс.

<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: '';(празни низови у ЦСС прилагођеним својствима се рачунају као вредност) или да подесите променљиву Сасс на $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"на последњу ставку скупа да бисте назначили да она представља тренутну страницу.

За више информација погледајте ВАИ-АРИА ауторске праксе за образац кружења .

Сасс

Променљиве

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