галета

Посочете местоположението на текущата страница в рамките на навигационна йерархия, която автоматично добавя разделители чрез 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, функцията за кавички е необходима за генериране на кавички около низ. Например, като използвате >като разделител, можете да използвате това:

$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 Authoring Practices за шаблона на навигационен път .

дързък

Променливи

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