Хлебные крошки — это дополнительная навигационная цепочка, которая показывает положение текущей страницы в структуре сайта. Например: «Главная → Каталог → Освещение → Настольные лампы». Ссылки позволяют перейти к более общему разделу, не открывая меню и не возвращаясь несколько раз назад.
Такую цепочку особенно полезно продумывать для людей, которые попали на внутреннюю страницу из поиска или по прямой ссылке. Они не видели предыдущие разделы и могут не понимать, какие материалы или товары находятся рядом. Назначение этого элемента подробно разбирает Яндекс в материале о навигации breadcrumbs. Объяснение Яндекса.
Когда хлебные крошки помогают
Начните со структуры и пользовательских задач. Если на сайте есть разделы, подразделы и отдельные карточки, цепочка может дать человеку понятный путь к более широкому выбору.
Представим посетителя магазина. Он открыл из поиска конкретную настольную лампу, но её размеры не подошли. Ссылка на категорию «Настольные лампы» позволяет продолжить выбор без поиска нужного пункта в основном меню.
В блоге похожая ситуация возникает со статьёй. Читатель может захотеть посмотреть другие материалы того же раздела. В базе знаний цепочка помогает понять, к какой теме относится инструкция.
| Тип страницы | Возможная цепочка | Что она даёт |
|---|---|---|
| Карточка товара | Каталог → Освещение → Настольные лампы | Переход к похожим товарам |
| Статья в журнале | Журнал → Дизайн интерфейсов → Статья | Понимание темы раздела |
| Инструкция | Помощь → Оплата → Возврат платежа | Доступ к соседним вопросам |
| Страница услуги | Услуги → Разработка → Интернет-магазины | Переход к общей группе услуг |
Для одностраничного сайта длинная цепочка обычно не решает отдельной задачи. На небольшом ресурсе с простой структурой сначала стоит проверить, достаточно ли основного меню и понятных ссылок.
Хлебные крошки не заменяют удобное меню сайта. Меню помогает выбирать основные направления, а цепочка объясняет положение открытой страницы.
Показывайте структуру, а не случайный маршрут
Самый понятный вариант для каталога и контентного сайта — иерархическая цепочка. Она зависит от места страницы в архитектуре, а не от того, каким путём человек на неё пришёл.
Допустим, посетитель открыл товар из подборки на главной странице. Это не обязательно означает, что подборка должна стать родительским уровнем товара. Если она временная и объединяет разные категории, такой путь может запутать.
Кнопка браузера «Назад» и хлебные крошки решают разные задачи. Первая возвращает к предыдущему просмотру. Вторая должна вести к понятному уровню структуры.
Не стоит автоматически собирать цепочку из всех фрагментов URL. Технический адрес может содержать служебные части, которые ничего не объясняют посетителю.
Перед проектированием выпишите для каждого типа страниц:
- текущий объект;
- его основной родительский раздел;
- более общий уровень, если он полезен;
- названия и адреса переходов;
- исключения, требующие отдельного правила.
Такой список помогает обнаружить проблемы архитектуры ещё до рисования компонента.
Что делать, если страница относится к нескольким разделам
Товар может присутствовать в нескольких подборках, а статья — иметь несколько рубрик. Здесь нужно согласованное правило, иначе одна страница будет получать непредсказуемые цепочки.
Для редакционного сайта можно назначить основной раздел материала. Для каталога — определить основную категорию товара. Это не запрещает дополнительные связи, но делает путь понятным.
Рассмотрим условный пример. Лампа находится в категории «Настольные лампы», подборке «Для домашнего кабинета» и списке новинок. Для основной цепочки логично использовать устойчивую категорию. Подборки можно оставить отдельными ссылками.
Другой вариант возможен, если интерфейс осознанно сохраняет контекст каталога. Но такое поведение нужно проверить: пользователь должен понимать, куда приведёт ссылка и что произойдёт при открытии той же страницы из поиска.
Не добавляйте фильтры в цепочку без разбора. «Белый», «до 5 000 рублей» и «в наличии» могут быть выбранными параметрами, а не самостоятельными разделами. Для сброса фильтров удобнее отдельные элементы управления.
Как подписывать звенья
Названия должны быть короткими и однозначными. Используйте привычные названия разделов, которые человек видит в меню и заголовках.
Если в меню написано «Доставка», а в цепочке — «Логистическое обслуживание покупателей», приходится заново разбираться, один ли это раздел. Согласованная терминология уменьшает такую нагрузку.
Не вставляйте в каждое звено рекламную формулировку или длинный поисковый запрос. Цепочка должна помогать ориентироваться. Она не предназначена для размещения повторяющихся ключевых слов.
Название текущей страницы можно показывать последним элементом. Если оно очень длинное, заранее определите правило отображения. Важно не потерять различие между похожими страницами.
Например, сокращение «Настольная лампа…» бесполезно, если рядом существуют десятки карточек с таким началом. Иногда лучше не показывать длинное название в цепочке и оставить его в хорошо заметном H1. Выбранный вариант должен быть единым и проверенным для конкретного шаблона.
Как оформить цепочку
Размещайте компонент там, где его легко заметить до изучения основного содержимого. Часто это область над заголовком страницы. При этом хлебные крошки не должны визуально конкурировать с H1 и основным действием.
Ссылки должны выглядеть как ссылки. Посетителю важно различать доступный переход, разделитель и обозначение текущего положения.
Для разделителей подходят простые символы, согласованные с дизайном. Сам разделитель не должен выглядеть как отдельная кнопка. Не делайте промежутки настолько маленькими, чтобы на телефоне было сложно выбрать нужное звено.
Текущую страницу можно представить обычным текстом. Если она реализована ссылкой, W3C рекомендует обозначать её состояние с помощью aria-current="page". Саму цепочку размещают в навигационной области с понятным доступным названием. Паттерн Breadcrumb в W3C.
Эти детали стоит включить в передачу макета разработчику. Визуального образца без описания состояний недостаточно, если команда должна одинаково реализовать компонент на разных страницах.
Что предусмотреть на мобильном экране
Цепочка, которая помещается на широком мониторе, может занять несколько строк на телефоне. Проблема особенно заметна у глубоких категорий и длинных русскоязычных названий.
Не уменьшайте шрифт только ради одной строки. Сначала решите, какая информация нужна человеку в этом месте.
Возможны разные варианты:
- перенос звеньев на следующую строку;
- сокращённая цепочка с доступным раскрытием промежуточных уровней;
- заметная ссылка на родительский раздел;
- горизонтальная прокрутка при очевидном и проверенном поведении.
У каждого решения есть ограничения. Перенос увеличивает высоту блока. Скрытые уровни требуют дополнительного действия. Прокрутку можно не заметить. Поэтому вариант выбирают на реальных названиях и сценариях, а не на макете с короткими словами.
Проверьте хотя бы одну страницу с самым длинным заголовком и одну с максимальной глубиной. Дополнительно увеличьте масштаб текста и убедитесь, что компонент остаётся понятным.
Работу цепочки следует проверять вместе с остальной адаптивной структурой сайта. Локально аккуратный элемент не поможет, если из-за него заголовок и содержимое смещаются за границы экрана.
Как проверить доступность
Пройдите по цепочке клавишей Tab. Фокус должен быть заметным, а порядок переходов — соответствовать порядку элементов.
Проверьте, что ссылки действительно открывают ожидаемые разделы. Пустые адреса и переходы «куда-нибудь в каталог» разрушают смысл навигации.
Пользователь программы чтения с экрана должен понимать, что перед ним отдельная навигационная область. Визуальные разделители не должны создавать лишний шум при озвучивании.
W3C рассматривает хлебные крошки как один из способов помочь человеку ориентироваться в структуре сайта, наряду с другими средствами навигации. Рекомендации W3C о способах навигации.
Для проверки полезен простой сценарий: открыть глубокую страницу напрямую и найти более общий раздел, не используя мышь. Если действие вызывает затруднения, проблема может быть в названиях, фокусе или устройстве самого компонента.
Как связать дизайн и техническую реализацию
До разработки согласуйте источник данных для цепочки. Должно быть понятно, откуда берутся родительские уровни, названия и ссылки и кто может их изменить.
В техническом задании укажите:
- На каких шаблонах выводится компонент.
- Как определяется основная категория.
- Как отображается текущая страница.
- Что происходит с длинными названиями.
- Как выглядит мобильное состояние.
- Какие состояния предусмотрены для клавиатуры.
- Как проверяются ссылки после изменения структуры.
Если используется структурированная разметка, её нужно проверять отдельно от внешнего вида. Красиво нарисованная цепочка не подтверждает корректность данных в коде. Практические варианты внедрения и проверки разобраны в материале Топвизора. Руководство по хлебным крошкам.
Не обещайте рост позиций или кликабельности только от добавления этого элемента. Его непосредственная задача — дать человеку понятный путь внутри сайта.
Как принять готовый компонент
Для приёмки возьмите несколько реальных страниц: обычную, глубокую, с длинным названием и относящуюся к нескольким разделам.
На каждой проверьте положение в структуре, названия, адреса, отображение текущего уровня и мобильное поведение. Затем откройте страницу напрямую, без перехода через каталог, и повторите проверку.
Попросите человека, который не участвовал в проектировании, показать, где он находится и куда нажмёт для просмотра соседних материалов. Если он уверенно выбирает нужный раздел, цепочка выполняет свою задачу. Если приходится объяснять логику, стоит пересмотреть структуру или формулировки до запуска.