Крошки
Укажите местоположение текущей страницы в навигационной иерархии, которая автоматически добавляет разделители через CSS.
Навигационная цепочка (дублирующее меню, «хлебные крошки», англ. Breadcrumbs) — элемент навигации (обычно в файловых менеджерах), представляющий собой путь по файловой системе от корня до рабочего каталога, который в данный момент просматривает пользователь.
Пример
<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. Их можно изменить, изменив $breadcrumb-divider. Функция quote необходима для создания кавычек вокруг строки, поэтому, если Вы хотите > в качестве разделителя, Вы можете использовать это:
$breadcrumb-divider:quote(">");Также можно использовать встроенную иконку SVG base64:
$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 применения паттерна навигационных цепочек.
