Breadcrumbs

Общая информация

Хлебные крошки (breadcrumbs) — элемент интерфейса, показывающий путь от домашней страницы до того уровня иерархии, который в данный момент просматривает пользователь.

Все (кроме текущего) звенья цепочки могут быть активными и позволяют быстро перейти на более высокий уровень. Путь отображается только внутри приложения - от домашней страницы.

• Хлебные крошки - формат второстепенной навигации и никогда не должны полностью заменять основную.

• Не используйте ХК для продуктов с одноуровневой навигацией, потому что они создают ненужный беспорядок.

Навигационная цепочка из текстовых хлебных крошек формируется динамически. При переходе на более низкий уровень иерархии, в конец цепочки добавляется элемент текущего экрана.

Анатомия

1. Path-page. Страницы, отображающие путь до текущей. Интерактивные хлебные крошки

2. Стрелка-разделитель. Не интерактивная

3. Current-page. Текущая страница, хлебная крошка не интерактивная

Описание работы

Интерактивность

Все элементы страниц, кроме текущей, в компоненте хлебных крошек интерактивные и ссылаются на соответствующие страницы. Область клика:

Пользователи могут перемещаться по страницам хлебных крошек, щелкая на них мышью. Разделители между хлебными крошками не интерактивны.

Адаптивность

При уменьшении блока, размещающего в себе хлебные крошки:

1. Происходит сокращение названий (уходят в “...”) в порядке от 2ой хлебной крошки к текущей

   
2. Если хлебные крошки вмещают менее 3 символов, то они скрываются в блок “...”

   
3. При клике на блок “...” раскрывается overlay-панель, в которой списком отображены скрытые хлебные крошки. Порядок формирования списка - от 2ой и далее. Элементы списка - кликабельные и работают аналогично обычной хлебной крошке.

   

Оформление

Название (Label)

Название хлебной крошки должно совпадать с названием страницы

Иконки

Хлебные крошки могут содержать иконки, помогающие пользователю визуально сориентироваться в пути до текущей страницы. Рекомендуется использовать иконки только в том случае, когда заранее известна навигационная иерархия, которая остается неизменной.

Например, “Главная > Завод > Производство > Установка”.

Для экономии пространства также можно использовать иконку без Label для обозначения Главной страницы:

Размеры

Внешние размеры

Высота хлебных крошек составляет 32px.

Ширина хлебных крошек зависит от разрешения экрана.

Элемент	Значение
Иконки	16px * 16px
Стрелки	16px * 16px
Хлебная крошка	Height: 32px Focus border: 2px Focus border-radius: 2px

---

Элемент	Название стиля	Гарнитура	Кегль	Начертание
Название	Main/Body-text 12	Inter	12px	Regular

---

Внутренние размеры

Внутренние отступы в хлебных крошках равны 8px:

Состояния

Основные состояния

Существует 3 основных состояния хлебных крошек:

1. PathPage. Страница, отображающая путь до текущей.

2. Hover. При наведении

3. CurrentPage. Текущая страница

Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора хлебной крошки с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с любым другим состоянием.

При переходе к меню клавишей Tab первая хлебная крошка получает фокус — появляется рамка голубого цвета. 
Стрелками можно перемещать фокус между крошками. 
Если нажать клавишу Enter — произойдет переход на страницу, находящуюся в фокусе в настоящий момент.

Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.

Цвета