Breadcrumbs
Хлебные крошки (Breadcrumbs) — цепочка ссылок, отражающая путь в структуре сервиса от корневой страницы до текущей с возможностью перехода на любую страницу. Этот компонент помогает пользователю понять, в какой части сервиса он находится, и быстро перейти на один или несколько уровней назад.
Применение
- Компонент Breadcrumbs следует использовать, если в сервисе есть вложенность страниц.
- На главной странице хлебные крошки не нужны.
- Хлебные крошки обычно размещаются на самом верху страницы в action bar.
Структура
1 — Текущая страница.
2 — Предыдущая страница.Рекомендуется отображать в первую очередь, если позволяет ширина контейнера.
3 — Корневая страница сервиса.
4 — Разделитель. По умолчанию используется /, но можно также использовать >.
5 — Иконка переполнения.Появляется, если все названия страниц не помещаются в контейнер по ширине. Не поместившиеся страницы отображаются в раскрывающемся меню, которое отображается по клику на многоточие.
Размеры
Базовый размер шрифта в хлебных крошках — body-1. Размер иконок — 16х16 px.
Состояния
Default — состояние по умолчанию.
Hover — состояние при наведении на название страницы.
Disable — некликабельный вариант. Может использоваться для текущей страницы или для страниц, на которые нет ссылок.
Loading — у компонента есть возможность передавать функцию для отображения контента элемента через параметр renderItemContent (например, отображать Skeleton, если данные для элемента крошек еще не загрузились).
Модификации
В хлебных крошках могут располагаться следующие дополнительные элементы:
- Иконка действия — например, «добавить в избранное», «копировать название страницы», контекстное меню.
- Лейбл — статус или другое свойство, относящееся к странице.
- Селект — при клике на элемент можно выбирать варианты.
- Дополнительный текст — ID, счетчик количества, другие свойства страницы.
Для перехода на главную страницу также можно использовать иконку «домик» как замену слова «главная».
Кастомизация
Можно изменять цвета, разделители, стиль ховера. При этом важно сохранять более яркое выделение текущей страницы и достаточную контрастность элементов.
