Лучшие рассорки на хлебные крошки

Хлебные крошки (breadcrumbs), привычный элемент UX, который, казалось бы, сложно испортить. Однако даже крупные интернет-магазины и медиа регулярно допускают одни и те же ошибки. В этой статье мы собрали 83 самые «вкусные» рассорки: от смешных до катастрофических. Проходимся по каждому пункту, чтобы вы знали, чего делать ни в коем случае нельзя — и как вылечить «черствые» крошки.

Классификация рассорок

• Визуальные ляпы — всё, что портит внешний вид.
• Смысловые ловушки — когда крошки вводят в заблуждение.
• Технические проколы — баги, доступность, мобильные проблемы.
• Контент-капкан — лишние слова, дубли, непонятные термины.

83 рассорки по порядку

2.1 Визуальные ляпы (1-25)

1. Размещать крошки в футере. Да, они там есть, но их никто не найдёт.
2. Выравнивание по центру. Пользователь ищет крошки слева, а их нет — паника.
3. Крошки в 3–4 строки. На десктопе выглядит как баг, на мобильном занимает пол-экрана.
4. Низкая контрастность. Серый текст на светло-сером фоне — наслаждайтесь баннерной слепотой.
5. Капсом кричать: «ГЛАВНАЯ / КАТАЛОГ / ТОВАР». Кажется, что сайт кричит на клиента.
6. Пунктирное подчёркивание. Пользователь думает, что это подсказка, а не ссылка.
7. Разные шрифты между уровнями. Создаёт ощущение «лоскутной» верстки.
8. Не подсвечивать текущую страницу. Пользователь не понимает, где находится.
9. Иконка «домика» вместо слова «Главная» без подписи. Новички вообще не поймут, куда ведёт значок.
10. Разделители-эмодзи. «Главная 🍞 Каталог 🥖 Товар» — милый, но нелепый способ убить доверие.

2.2 Смысловые рассорки (26-45)

26. Текущая страница – кликабельна. Пользователь жмёт и попадает на ту же страницу — фрустрация.
27. История поиска вместо иерархии. «Главная / Поиск «красные кроссовки» / Товар» выглядит как баг.
28. Два идентичных пути. Один товар доступен из «Обувь / Кеды» и «Бренды / Nike» — выводим оба, путая всех.
29. Скрывать промежуточные категории. «Главная / Товар» без указания подкатегории — потеря контекста.
30. Использовать внутренние коды категорий. «Главная / CAT-1203 / SKU-998877» — головоломка для клиента.
31. Дублировать название бренда и категории. «Apple / Смартфоны Apple / iPhone» — избыточно.
32. Обрубать длинные названия без тултипа. «Главная / Каталог / Супер-ультра-мега…» — что за товар, неясно.

2.3 Технические проколы (46-65)

46. Не прятать горизонтальный скролл. На мобильном выглядит как битый дизайн.
47. Разные регистры в URL и крошках. «/Catalog» vs. «/catalog» — дубли страниц, SEO-проблемы.
48. Отсутствие aria-label у ссылок. Скринридеры читают «ссылка, ссылка, ссылка» без контекста.
49. Фиксированная ширина ячеек. Длинные названия вылезают за границы.
50. Крошки перекрываются стики-хедером. На iOS скрываются за меню.

2.4 Контент-капкан (66-83)

66. Добавлять количество товаров в крошки. «Категория (1248) / Подкатегория (362)» — выглядит как стата, а не навигация.
67. Использовать английские термины в русском каталоге. «Home / Catalog / Smartphone» — неожиданный языковой скачок.
68. Кавычки вокруг текущей страницы. «Главная / Каталог / «Товар»» — лишний шум.
69. Писать «Вы здесь» перед крошками. Лишняя подпись, известная всем с 2005 года.
70. Размещать SEO-текст внутри крошек. «Главная / Каталог / Товары со скидкой до 90 %» — выглядит как спам.

Чек-лист «исправь за 1 минуту»

• ✅ Крошки видны на первом экране без прокрутки.
• ✅ Текущая страница не кликабельна и визуально отличается.
• ✅ Разделитель единообразен и не реагирует на hover.
• ✅ Ссылки контрастны ≥ 4.5:1.
• ✅ На мобильном горизонтальный свайп + индикатор прокрутки.

TL;DR

Чтобы не испортить хлебные крошки, достаточно трёх правил:

1. Делайте коротко, слева направо, без дублей.
2. Тестируйте на мобильных и скринридерах.
3. Не используйте крошки как SEO-текст или историю поиска.

Обновлено: 05 февраля 2026