Крошки

Пример

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

<navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item active"aria-current="page">Главная</li></ol></nav><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Главная</a></li><liclass="breadcrumb-item active"aria-current="page">Библиотека</li></ol></nav><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Главная</a></li><liclass="breadcrumb-item"><ahref="#">Библиотека</a></li><liclass="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.

<navstyle="--bs-breadcrumb-divider: '>';"aria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Главная</a></li><liclass="breadcrumb-item active"aria-current="page">Библиотека</li></ol></nav>

При изменении через Sass функция quote требуется для генерации кавычек вокруг строки. Например, используя > в качестве разделителя, Вы можете использовать это:

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

Также можно использовать встроенную иконку SVG. Примените ее через наше пользовательское свойство CSS или используйте переменную Sass.

<navstyle="--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"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Главная</a></li><liclass="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;.

<navstyle="--bs-breadcrumb-divider: '';"aria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Главная</a></li><liclass="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;