В этой статье
Александр
Хлебные крошки показывают место страницы в структуре сайта и дают короткий путь к более широкому разделу. Они особенно полезны в каталогах и базах знаний, где посетитель может прийти сразу на вложенную страницу. Разберём типы этой навигации и семь задач, для которых можно спроектировать свою цепочку.
Если главное меню отвечает на вопрос «куда можно перейти вообще», хлебные крошки объясняют «где находится эта страница». При проектировании навигации сайта разделяйте эти задачи: цепочка не должна заменять меню, поиск или возврат к отфильтрованной выдаче.
Что такое хлебные крошки
Хлебные крошки — вспомогательная навигационная цепочка, например «Главная → Электроника → Ноутбуки → Модель». Обычно она располагается над заголовком страницы. В иерархическом варианте цепочка отражает структуру сайта, а не последовательность переходов конкретного посетителя.
Три подхода к навигационной цепочке
Выберите подход по тому, что нужно объяснить читателю: положение в каталоге, выбранные условия или историю переходов.
- Иерархия разделов. Цепочка «Главная → Электроника → Ноутбуки» позволяет подняться на один или несколько уровней. Названия должны совпадать с названиями разделов в основной навигации.
- Атрибуты и фильтры. В автомобильном каталоге условия «Марка: Toyota» и «Год выпуска: 2025» удобнее показать отдельными метками с возможностью сброса. Не смешивайте выбранные фильтры с постоянной иерархией категорий.
- История переходов. Такая цепочка зависит от действий посетителя. Если нужна именно возможность вернуться к результатам поиска, понятная ссылка «Назад к результатам» часто полезнее длинного перечня просмотренных страниц.
Когда хлебные крошки помогают пользователю
Добавляйте цепочку там, где структура действительно содержит несколько уровней. На простом сайте с плоской навигацией она может только повторять меню.
Ориентация внутри каталога
Посетитель видит, к какому разделу относится текущая страница, и может открыть родительскую категорию. Это полезно при входе из поисковой системы: предыдущей страницы сайта в истории браузера ещё может не быть.
Понятная структура и внутренние ссылки
Связные названия разделов и доступные ссылки помогают просматривать сайт. Для поисковой системы важны также корректные адреса и согласованность разметки с видимой цепочкой. Одно добавление хлебных крошек не гарантирует роста позиций.
Возврат к выбору
На странице товара цепочка помогает открыть категорию и сравнить другие варианты. При этом выбранные фильтры и сортировку лучше сохранять отдельно: переход в категорию не должен неожиданно лишать пользователя результатов его работы.
Пример: категория и результаты поиска — не одно и то же
Представим мебельный каталог. У страницы «Письменный стол Линия» есть постоянный путь: «Каталог → Мебель → Столы → Письменный стол Линия». Человек может открыть её из категории, из поиска по запросу «узкий письменный стол» или из подборки распродажи. Сам стол от этого не становится частью трёх разных иерархий.
Оставьте устойчивую цепочку категорий и добавьте отдельную ссылку «Назад к результатам», когда есть сохранённая выдача. Она может возвращать запрос, сортировку и фильтр ширины. Переход «Столы» решает другую задачу: открывает категорию, а не обещает восстановить личный поиск.
| Как человек попал на товар | Что показывают хлебные крошки | Что нужно сохранить отдельно |
|---|---|---|
| Из категории «Столы» | Постоянный путь к категории товара | Фильтры и сортировку, если предусмотрен возврат к предыдущему списку |
| Из поиска «узкий письменный стол» | Тот же путь, а не текст поискового запроса | Запрос и состояние выдачи для ссылки «Назад к результатам» |
| По прямой ссылке из поисковой системы | Тот же путь, который помогает понять контекст | Не показывать вымышленный возврат к результатам, которых на сайте ещё не было |
| Из подборки распродажи | Основную категорию товара | Возврат к подборке, если он полезен; не превращать акцию в постоянного родителя товара |
Если товар действительно принадлежит нескольким категориям, сначала договоритесь о правиле выбора основного пути. Не заставляйте интерфейс менять структуру каждый раз в зависимости от последнего нажатия. Дополнительные категории можно показать рядом как отдельные связи.
Семь сценариев для проектирования хлебных крошек
1. Каталог книг: ориентир — Amazon
Для большого книжного каталога полезна цепочка от общего раздела к жанру: «Книги → Художественная литература → Детективы». На странице конкретной книги она даёт путь к похожим изданиям. При разборе Amazon обращайте внимание на глубину категорий и различия между типами товаров.
2. Семейство продуктов: ориентир — Apple
В каталоге с небольшим числом семейств достаточно короткого пути: «Компьютеры → Ноутбуки → Модель». Такой сценарий можно разбирать на примере продуктовой структуры Apple. Цепочка должна помогать перейти к семейству, не дублируя все пункты главного меню.
3. База знаний: ориентир — Википедия
Материал может относиться сразу к нескольким темам. Категории Википедии полезны для изучения таких связей, но сами по себе не равны линейной цепочке хлебных крошек. В своей базе знаний выберите основной путь к статье, а дополнительные темы покажите отдельно.
4. Каталог обуви: ориентир — Nike
Для спортивной обуви можно разделить постоянную категорию и условия выбора: «Обувь → Беговая обувь», а размер и цвет оформить фильтрами. Изучая каталог Nike, оценивайте, какие переходы меняют категорию, а какие лишь сужают выдачу.
5. Поиск жилья: ориентир — Airbnb
Географическая цепочка «Страна → Регион → Город» помогает расширить область поиска. Для сценария аренды, знакомого по Airbnb, важно отдельно сохранять даты и число гостей: эти параметры не являются уровнями географической иерархии.
6. Маркетплейс: ориентир — eBay
В крупном маркетплейсе товар может подходить нескольким категориям. На примере eBay удобно изучать, как выбирается основной раздел. Для своего каталога задайте устойчивую иерархию и избегайте разных цепочек, которые без причины меняются при каждом входе на страницу.
7. Продукты и документация: ориентир — Adobe
В продуктовой экосистеме, подобной Adobe, путь к продукту и путь к справочной статье решают разные задачи. Для документации полезна цепочка «Справка → Продукт → Тема». Не помещайте в неё маркетинговые разделы, если они не помогают найти соседние инструкции.
Как собрать цепочку в макете
Начните с названий реальных разделов. Покажите текущую страницу последним элементом, визуально отделите её от ссылок и выберите один разделитель. Для длинных названий подготовьте компактный вариант, который сохраняет смысл и доступ к родительскому разделу.
Длинная цепочка на узком экране
Для короткого пути сначала попробуйте перенос на следующую строку. Не уменьшайте шрифт до плохо читаемого размера только ради одной строки. Если цепочка глубокая, сохраните видимым ближайший родительский раздел: именно он помогает перейти к соседним товарам или статьям.
В нашем каталоге на телефоне можно оставить «… → Столы → Письменный стол Линия». Многоточие в таком решении — кнопка «Показать все разделы», а не декоративный знак. По нажатию она раскрывает скрытые предшествующие уровни. Пользователь должен иметь возможность открыть их с клавиатуры, перейти по ссылке и закрыть раскрытый список с возвратом фокуса к кнопке. Если такое поведение неоправданно усложняет интерфейс, обычный перенос строк будет лучше.
Длинное название текущей страницы можно перенести отдельно. Не скрывайте единственную ссылку на родительскую категорию, оставляя только «Главная» и название товара: формально цепочка останется, но полезный переход исчезнет.
Ссылки, текущая страница и доступность
Предыдущие уровни должны быть настоящими ссылками на соответствующие разделы. Текущую страницу можно оставить обычным текстом и отличить от ссылок не только цветом. Разделители не являются отдельными действиями и не должны получать фокус.
В паттерне W3C для хлебных крошек цепочка помещается в именованную навигационную область. Если текущая страница оформлена ссылкой, её обозначают с помощью aria-current="page". Для обычных ссылок цепочки не нужен отдельный режим управления стрелками, как у вкладок.
В Pixso можно собрать компонент цепочки и проверить его на нескольких страницах: короткой, глубоко вложенной и мобильной. Добавьте состояния ссылок и видимого фокуса, а затем обсудите с разработчиком поведение при переносе строк и сокращении промежуточных уровней.
Сделайте три экземпляра компонента для одного товара: полный путь на компьютере, узкую версию и раскрытые скрытые уровни. Названия категорий в них должны совпадать. Рядом подпишите, что происходит после выбора «Столы», а что — после «Назад к результатам»: внешне эти ссылки могут находиться близко, но сохраняют разный контекст.
Спроектировать навигацию в Pixso 
Что проверить в прототипе
Дайте участнику открыть соседний раздел, вернуться к категории и найти другой товар. Наблюдайте, замечает ли он цепочку и понимает ли её названия. Если для этих задач используется только главное меню, проверьте расположение и полезность дополнительной навигации.
Для мебельного каталога предложите два разных задания: «Посмотрите другие столы» и «Вернитесь к найденным узким столам с теми же условиями». В первом случае полезен переход к категории, во втором — сохранённая выдача. Если участник выбирает одну и ту же ссылку для обеих задач и удивляется результату, уточните подписи и расположение действий.
Отдельно начните с прямой ссылки на товар, без посещения каталога. Так видно, помогает ли цепочка человеку, у которого ещё нет истории внутри сайта. На телефоне повторите задачу со скрытыми уровнями: многоточие должно оставаться понятным и доступным, а не превращать короткий путь в поиск спрятанного меню.
Сохраните удачную цепочку как компонент в Pixso и примените её к страницам разных уровней. Так проще увидеть непоследовательные названия, слишком длинные пути и различия между настольной и мобильной версиями.
