Хлебные крошки

Пример

Используйте упорядоченный или неупорядоченный список со связанными элементами списка для создания минимально стилизованных хлебных крошек. Используйте наши утилиты для добавления дополнительных стилей по желанию.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Главная</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Главная</a></li>
    <li class="breadcrumb-item active" aria-current="page">Библиотека</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Главная</a></li>
    <li class="breadcrumb-item"><a href="#">Библиотека</a></li>
    <li class="breadcrumb-item active" aria-current="page">Данные</li>
  </ol>
</nav>

Разделители

Разделители автоматически добавляются в CSS через ::before и content. Они могут быть изменены путем изменения локальной CSS пользовательской переменной --bs-breadcrumb-divider, или через переменную Sass $breadcrumb-divider — и $breadcrumb-divider-flipped для её RTL аналога, если необходимо. Мы по умолчанию используем нашу переменную Sass, которая установлена как резервная для пользовательской переменной. Таким образом, вы получаете глобальный разделитель, который вы можете переопределить без перекомпиляции CSS в любое время.

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Главная</a></li>
    <li class="breadcrumb-item active" aria-current="page">Библиотека</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='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Главная</a></li>
    <li class="breadcrumb-item active" aria-current="page">Библиотека</li>
  </ol>
</nav>

$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

Вы также можете удалить разделитель, установив --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="#">Главная</a></li>
    <li class="breadcrumb-item active" aria-current="page">Библиотека</li>
  </ol>
</nav>

$breadcrumb-divider: none;

Доступность

Поскольку хлебные крошки предоставляют навигацию, хорошей идеей является добавление осмысленной метки, такой как aria-label="breadcrumb", для описания типа навигации, предоставляемой в элементе <nav>, а также применение aria-current="page" к последнему элементу набора, чтобы указать, что он представляет текущую страницу.

Для получения дополнительной информации см. Руководство по созданию ARIA, паттерн хлебных крошек.

CSS

Переменные

Как часть развивающегося подхода Bootstrap к CSS переменным, хлебные крошки теперь используют локальные CSS переменные на .breadcrumb для улучшенной настройки в реальном времени. Значения для CSS переменных устанавливаются через Sass, поэтому настройка Sass также поддерживается.

--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

Sass переменные

$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:          var(--#{$prefix}secondary-color);
$breadcrumb-active-color:           var(--#{$prefix}secondary-color);
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;