Цепочка навигации: показывает, где пользователь находится в иерархии, и даёт прыгнуть на любой уровень выше за один клик. Вспомогательный элемент — не единственный способ навигации.
| Элемент | MD / SM | Токен / переменная Figma |
|---|---|---|
| Разрядка ссылка ↔ разделитель | 16 / 12 | --ds-space-4 · --ds-space-3 ← ❖ Breadcrumbs/Crumb/Gap |
| Отступ после разделителя | 16 / 12 | --ds-space-4 · --ds-space-3 ← ❖ Breadcrumbs/Crumb/Padding-right |
| Разрядка иконка ↔ текст | 6 / 4 | --ds-lnk-md-gap · --ds-lnk-sm-gap ← ❖ Breadcrumbs/Crumb/Core/Gap |
| Ссылка | 16 / 20 · 14 / 16 | --ds-lnk-md-fs|lh · --ds-lnk-sm-fs|lh ← ❖ Breadcrumbs/Link text |
| Разделитель «/» | 16 / 20 · 14 / 16 | --ds-lnk-md-fs|lh · --ds-lnk-sm-fs|lh ← ❖ Breadcrumbs/Slash — у разделителя своё имя в коллекции, а величина ссылки: обе переменные ведут на тот же ряд Control/Label |
| Иконка | 20 / 16, толщина 2 / 1.5 | --ds-lnk-md-icon|stroke · --ds-lnk-sm-icon|stroke |
| Высота крошки | 20 / 16 | своего значения нет — наследуется от дочернего LinkText (--ds-lnk-md-lh · --ds-lnk-sm-lh). Разделитель и иконка дают ту же величину, поэтому строка ровна при любом составе |
| Ссылка: покой, наведение, посещённая-под-наведением | — | --ds-info-soft-text ← Text/Info/Ghost/Default |
| Ссылка: посещённая | — | --ds-info-text-pressed ← Text/Info/Ghost/Active |
| Разделитель | — | --ds-disabled-text ← Text/Disable/Neutral (Blue) |
| Текущая страница | — | --ds-text-tertiary ← Static/Text/Neutral-Blue/Tertiary |
| Фокус | — | --ds-focus-ring — в макете варианта Focus нет, кольцо общее |
Новых токенов компонент не потребовал ни одного: размерный ряд ссылки совпадает
с лестницей LinkText, и это тождество, а не совпадение значений — в макете обе
цепочки идут через один ряд ↔ Control/Label, у нас обе через
--ds-btn-*. Цвета сверены отпечатком по четырём темам против всех
758 объявленных имён --ds-*.
Собственной высоты у крошки нет, и это не упущение, а устройство: высоту задаёт
дочерний LinkText, остальное её наследует. Отсюда 20 в MD и 16 в SM — интерлиньяж
ссылки; разделитель и иконка дают ровно столько же, поэтому строка ровна при любом
составе крошки и не зависит от того, сколько в цепочке звеньев. Цифры 24 и 20 из
раздела спеки про размеры сюда не приходят: тот раздел писан под Pixso, а цепочка
в сборе не должна быть громоздкой. Ось размера здесь короче, чем у ссылки: у
LinkText три ступени, у крошек две — SM и MD, LG не заводится.
За 6 сентября это место переписано трижды, и обе прежние редакции ошибались
одинаково — придумывали компоненту собственную величину: сперва высоту тянул
интерлиньяж разделителя, взятый с чужого ряда, потом её же прописали
min-height'ом. Обе сняты.
| Клавиша | Действие |
|---|---|
Tab | Переводит фокус к следующей ссылке цепочки |
Shift + Tab | Возвращает фокус к предыдущей ссылке |
↑ · ↓ | Ходят по раскрытому списку скрытых ссылок |
Enter | Переход по ссылке в фокусе; в списке — подтверждение выбора |
<nav> с aria-label — скринридер называет блок и даёт его пропустить.<ol>: так озвучивается количество шагов пути.aria-current="page" — он читается как «текущая страница». Кликабельным он не является.aria-hidden): они разметка, а не содержание.