Как оформить хлебные крошки, чтобы они были понятны и на десктопе, и на мобайле

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

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

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

Общие правила для всех устройств

Прежде чем переходить к адаптации, стоит вспомнить универсальные законы проектирования хлебных крошек:

1. Отражайте иерархию, а не историю. Крошки должны показывать логическую структуру сайта (Главная > Категория > Подкатегория > Товар), а не путь, по которому пользователь кликал (страница А > страница Б > страница В).
2. Используйте понятные разделители. Чаще всего используют графические элементы: стрелки (>), слеши (/) или тире.

   Главное, чтобы они четко отделяли уровни друг от друга.

3. Последний элемент — некликабельный. Текущая страница, на которой находится пользователь, должна замыкать цепочку навигации. Делать ее ссылкой не имеет смысла. Для визуального отличия ее часто делают другого цвета или выделяют жирным шрифтом.
4. Не заменяйте основное меню. Хлебные крошки — это полезное дополнение, но не замена главной панели навигации (хедера).

Оформление хлебных крошек на десктопе

На настольных компьютерах у веб-дизайнеров есть главное преимущество — много горизонтального пространства.

• Размещение. Стандартная и наиболее привычная позиция — над заголовком H1. Глаз пользователя автоматически ищет их там перед тем, как начать читать основной контент.
• Размер шрифта. Шрифты в крошках должны быть меньше основного текста (обычно 12–14 px), чтобы не перетягивать на себя внимание, но при этом оставаться читабельными.
• Взаимодействие. На десктопе обязательно используйте эффекты при наведении курсора (hover). Подчеркивание текста или легкое изменение цвета ссылки при наведении подскажет пользователю, что на элемент можно кликнуть.
• Полный путь. Если структура сайта не аномально глубокая (более 6-7 уровней), на десктопе рекомендуется показывать путь целиком.

Адаптация для мобильных устройств (Mobile)

Здесь начинается самое сложное.

Горизонтального места на экране смартфона катастрофически мало, а хлебные крошки могут быть длинными. Кроме того, курсор мыши заменяется пальцем пользователя (touch-интерфейс).

Как решить проблему нехватки места:

1. Горизонтальный скролл (Свайп). Это самый современный и удобный вариант.

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

2. Сокращение с многоточием. Если путь слишком длинный, промежуточные уровни скрываются и заменяются многоточием: Главная > ... > Смартфоны > Apple.

   При клике на многоточие может выпадать список скрытых категорий.

3. Кнопка «Назад к родительской категории». Вместо классической цепочки остается только одна ссылка, ведущая на уровень выше (например: < Назад в Смартфоны).

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

Особенности Touch-интерфейса на мобайле:

Не забывайте о «правиле толстого пальца». Ссылки в хлебных крошках на телефоне должны иметь увеличенные отступы (padding).

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

Чего делать нельзя?

• Перенос на несколько строк. Никогда не заставляйте хлебные крошки переноситься на вторую, третью или четвертую строку (особенно на мобильных).

  Это «съедает» драгоценное вертикальное пространство первого экрана и выглядит неряшливо.

• Слишком громоздкие иконки. Иконка домика для главной страницы — это хорошо. Но иконка для каждого раздела — визуальный мусор, усложняющий восприятие.
• Забывать о микроразметке. Обязательно внедряйте код Schema.org (BreadcrumbList).

  Это нужно не для людей, а для ботов поисковых систем. Благодаря микроразметке ваши крошки превратятся в красивый и понятный сниппет в результатах поиска Google или Яндекса.

Итог

Хорошие хлебные крошки работают незаметно. Если пользователь без труда понимает, в каком разделе сайта он очутился, и может в один клик или тап вернуться на уровень выше — вы всё сделали правильно. Используйте полный путь и ховер-эффекты для десктопа, а для мобильных версий внедряйте горизонтальный свайп с достаточным расстоянием между ссылками.