Breadcrumbs
Figma
Breadcrumbs — элемент навигации на сайте или в приложении. Показывает путь пользователя и позволяет вернуться назад.
Из чего состоит
  1. Ссылка на страницу
  2. Разделитель
  3. Декоративная иконка
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Состояние (State)
Размер (Size)
Отключаемые элементы
👁 Правая иконка (Right Icon)
👁 Разделитель (Separator)
👁 Левая иконка (Left Icon)
Редактируемые элементы
✏️ Левая иконка (Left icon)
✏️ Текст (Text TXT)
Наличие иконок
Вид дропдауна
Дропдаун выпадает при нажатии на всю хлебную крошку.
Размещение
Размер крошки и дропдауна
Размер хлебной крошки — M.
Размер дропдауна — М

Размер хлебной крошки — S.
Размер дропдауна — S

Размер хлебной крошки — XS.
Размер дропдауна — S
Минимальная ширина дропдауна
Минимальная ширина = 120 px
Максимальная ширина дропдауна
Максимальная ширина = 296 px. По умолчанию текст пункта дропдауна может быть максимум в 2 строки.

Можно задать валидацию на количество видимых символов. Если нарушается валидация, тогда последние три доступных символа становятся «...»

При наведении на троеточие, появляется тултип с полным названием хлебной крошки
Тултип
При наведении на пункт, текст которого скрылся, появляется тултип с полным текстом.

2/3/4 строчки + троеточие — дефолтный тултип
Слишком длинная хлебная крошка
Если в одной крошке слишком много текста, то часть скрывается в троеточие, а при наведении появляется тултип
Хлебные крошки не помещаются по ширине
Если компонент с хлебными крошками не помещается по ширине экрана, тогда предпоследняя хлебная крошка становиться троеточием.
Акцентный цвет
Последняя крошка акцентного “Default” цвета по умолчанию
При ховере — акцентного “Hover” цвета, при клике — акцентного “Active” цвета
Если акцентный цвет "Green" или "Yellow", то цвет последней крошки по умолчанию вместо “Default” всегда "Active". При ховере — акцентного “Hover” цвета, при клике — акцентного “Active” цвета