Breadcrumbs
Общая информация
Хлебные крошки (breadcrumbs) — элемент интерфейса, показывающий путь от домашней страницы до того уровня иерархии, который в данный момент просматривает пользователь.
Все (кроме текущего) звенья цепочки могут быть активными и позволяют быстро перейти на более высокий уровень. Путь отображается только внутри приложения - от домашней страницы.
Хлебные крошки - формат второстепенной навигации и никогда не должны полностью заменять основную.
Не используйте ХК для продуктов с одноуровневой навигацией, потому что они создают ненужный беспорядок.
Навигационная цепочка из текстовых хлебных крошек формируется динамически. При переходе на более низкий уровень иерархии, в конец цепочки добавляется элемент текущего экрана.
Анатомия
Path-page. Страницы, отображающие путь до текущей. Интерактивные хлебные крошки
Стрелка-разделитель. Не интерактивная
Current-page. Текущая страница, хлебная крошка не интерактивная
Описание работы
Интерактивность
Все элементы страниц, кроме текущей, в компоненте хлебных крошек интерактивные и ссылаются на соответствующие страницы. Область клика:
Пользователи могут перемещаться по страницам хлебных крошек, щелкая на них мышью. Разделители между хлебными крошками не интерактивны.
Адаптивность
При уменьшении блока, размещающего в себе хлебные крошки:
Происходит сокращение названий (уходят в “...”) в порядке от 2ой хлебной крошки к текущей
Если хлебные крошки вмещают менее 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 основных состояния хлебных крошек:
PathPage. Страница, отображающая путь до текущей.
Hover. При наведении
CurrentPage. Текущая страница
Фокус (Focus)
Так же существует состояние Focus. Он появляется в момент выбора хлебной крошки с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с любым другим состоянием.
При переходе к меню клавишей Tab первая хлебная крошка получает фокус — появляется рамка голубого цвета. Стрелками можно перемещать фокус между крошками. Если нажать клавишу Enter — произойдет переход на страницу, находящуюся в фокусе в настоящий момент.
Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.
Цвета
Last updated
