Определение

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

Функциональность

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

Лучше всего использовать на страницах, которые:

• Находятся глубоко в структуре сайта
• Не имеют удобной навигации по разделам
• Могут потребовать быстрого возврата на предыдущую страницу

Каждый элемент должен быть ссылкой, кроме последнего, который показывает,
где находится пользователь.

Breadcrumbs могут использоваться как самостоятельный элемент навигации или быть встроены в состав Шапки страницы (Page header), чтобы предоставить пользователям контекст и помочь легко перемещаться по уровням сайта.

Дизайн и Стиль

Размер и Форма

Breadcrumbs представлены в виде горизонтального списка ссылок, разделённых символами (например, стрелками или слэшами). Они минималистичны, чтобы не отвлекать внимание от основного контента, но при этом должны быть достаточно заметными для быстрого доступа.

Имеют три размера (XS, S, M), которые выбираются в зависимости от контекста использования, таких как ширина страницы или плотность информации

Цвет и Контраст

Цвет Breadcrumbs фиксирован. Он изменяется только при наведении на активные ссылки, что помогает пользователю понять, что элементы кликабельны. Последний элемент Breadcrumbs всегда остаётся статичным и выделенным, но не является ссылкой.

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Текст

Если название хлебной крошки превышает 192px, оно будет автоматически обрезано
с добавлением многоточия в конце. Полный текст будет доступен в виде всплывающей подсказки при наведении курсора.

Варианты

Длина компонента

По умолчанию компонент хлебных крошек может отображать до 7 элементов в цепочке.

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

Типы разделителей

В зависимости от контекста или оформления, Breadcrumbs могут быть разделены стрелками или слэшами

Параметры

Размеры

Разделитель в виде иконки

Разделитель в виде слэша

Состояния

Ссылка

Скрытые ссылки

В состоянии Pressed с помощью компонента Слот (Slot) можно вставить скрытые страницы, что позволяет кастомизировать отображение содержимого в зависимости
от пользовательских требований или конкретной задачи.

Анатомия

Показано на примере размера S