Хлебные крошки — это элемент интерфейса, который показывает путь от главной страницы до текущего положения пользователя в иерархии сайта или приложения. Как в детской сказке, она помогает пользователям понять, где они находятся, и предоставляет быстрые пути для возврата на предыдущие уровни. Данный элемент очень удобно использовать, когда нельзя перегружать интерфейс, но нужно добавить еще один уровень навигации. Несмотря на то, что хлебные крошки обычно состоят только из текста и символов, существует ряд правил, которые необходимо знать, чтобы сделать их правильно.
Базовая анатомия
Цепочка состоит из последовательности ссылок, разделённых визуальными элементами (обычно стрелками или слешами). Каждый элемент должен быть связан с уровнем в иерархии сайта, а текущее положение визуально выделяться и временно переставать быть ссылкой. Стоит поддерживать баланс между информативностью и компактностью.
Анатомия с дополнительными элементами
Элементы навигационной цепочки могут быть дополнены иконками для лучшего визуального восприятия разделов, а в длинных путях может быть использовано «сворачивание» промежуточных элементов (с возможностью их раскрытия). Текущий уровень иногда может включать дополнительную информацию или действия.
Любой навигационный элемент критически важен для правильного интерфейса, именно поэтому стоит уделить особое внимание изучению их состояний.
Default
В обычном состоянии все элементы цепочки должны быть хорошо читаемыми, а разделители — чётко видимыми, создавая ритм. Текущее положение стоит выделить, но избегать перетягивания внимания.
Hover
При наведении на интерактивные элементы они подчёркиваются или меняют цвет, сигнализируя о том, что они кликабельны. Если у разделов сайта слишком длинные названия, можно дополнительно показывать подсказку с полным названием раздела для свёрнутых элементов.
Active
При клике на ссылку устанавливается чёткая обратная связь, а при раскрытии свёрнутых элементов анимация должна быть очень плавной, но не слишком простой.
Disabled
Неактивное состояние встречается крайне редко, обычно для временно недоступных разделов. Однако, чтобы не путать пользователя, лучше не использовать такие состояния, только если они не связаны, например, с каким-то ивентом.
