Крошки
Укажите местоположение текущей страницы в навигационной иерархии, которая автоматически добавляет разделители через CSS.
Пример
Изменение знака-разделителя
Разделители автоматически добавляются через CSS с помощью ::before
и content
. Их можно изменять через изменение карты $breadcrumb-divider
. Функция цитаты необходима для создания цитат вокруг строки, так что если вы хотите знак >
в качестве разделителя, используйте следующее:
$breadcrumb-divider: quote(">");
Еще можно использовать встроенные в base64 SVG-иконки:
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
Знак-разделитель можно удалить, назначив для $breadcrumb-divider
значение none
:
$breadcrumb-divider: none;
Доступность
Поскольку навигационные цепочки нужны для навигации, хорошей практикой является добавление ярлыка-подсказки, такого как aria-label="breadcrumb"
, для описания типа навигации <nav>
-элемента, также как и применение свойства aria-current="page"
к последнему элементу набора для указания на то, что этот элемент представляет текущую страницу.
Для дополнительной информации смотрите авторские стандарты и практики WAI-ARIA применения паттерна навигационных цепочек.