Крошки
Укажите местоположение текущей страницы в навигационной иерархии с автоматическим добавлением разделителей при помощи CSS.
Пример
Для простого создания навигационных "хлебных крошек" используйте упорядоченный или неупорядоченный список с элементами связанного списка. Используя наши утилиты вы можете добавить дополнительные стилей.
<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-аналога. Таким образом, вы получаете глобальный разделитель, который можно в любой момент изменить без перекомпиляции CSS.
<navstyle="--bs-breadcrumb-divider: '>';"aria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="breadcrumb-item active"aria-current="page">Library</li></ol></nav>При изменении через Sass функция кавычек quote требуется для генерации кавычек вокруг строки. Например, используя > в качестве разделителя, вы можете использовать это:
$breadcrumb-divider:quote(">");Также можно использовать встроенные SVG-иконки. Примените с помощью настраиваемых свойств CSS или используя Sass переменную.
<navstyle="--bs-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");"aria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="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;.
<navstyle="--bs-breadcrumb-divider: '';"aria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="breadcrumb-item active"aria-current="page">Library</li></ol></nav>$breadcrumb-divider:none;Доступность
Поскольку навигационные цепочки нужны для навигации, хорошей практикой является добавление ярлыка-подсказки, такого как aria-label="breadcrumb", для описания типа навигации <nav>-элемента, также как и применение свойства aria-current="page" к последнему элементу набора для указания на то, что этот элемент представляет текущую страницу.
Для дополнительной информации смотрите авторские стандарты и практики WAI-ARIA применения паттерна навигационных цепочек.
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:$gray-600;$breadcrumb-active-color:$gray-600;$breadcrumb-divider:quote("/");$breadcrumb-divider-flipped:$breadcrumb-divider;$breadcrumb-border-radius:null;
