Хлебные крошки и путь пользователя

1) Роль и ценность

• показывают, где я нахожусь в иерархии;
• дают быстрый обратный путь на уровень выше;
• уменьшают “back-bounce” (повторные клики «назад»);
• повышают обнаруживаемость соседних уровней и улучшают SEO для контентных страниц.

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

2) Когда использовать

Глубокие каталоги и контент (провайдер → категория → игра/статья).
B2B-админки и отчеты с 2–3+ уровнями вложенности.
Лонгриды/доки с разделами и оглавлением (крошки + TOC).
Не нужны на экранах верхнего уровня (лобби/дешборд), где глубины нет.

3) Типы крошек

1. Иерархические (структурные) — отражают IA, а не маршрут пользователя:

`Главная › Провайдеры › Play’n GO › Book of Dead`

2. По пути (history-based) — отображают фактический маршрут (редко уместно в вебе; ближе к «назад»).
3. Гибрид — иерархия + последний шаг с сохраненными фильтрами/контекстом.

Рекомендация: по умолчанию — иерархические, чтобы избежать «шума» от случайных переходов.

4) Состав и формат

Разделитель: `›` или `/` (консистентно с дизайном и локалью).
Стартовая точка: «Главная»/логотип кликабелен.
Усечение: при глубине >4 уровней скрывать средние звенья в «…» с раскрытием.
Последний элемент: текущая страница, некликабельна и визуально акцентирована.
Длины заголовков: обрезка с многоточием, но с полным `title`/tooltip при hover/focus.

5) Генерация крошек (логика)

Строить по канонической иерархии URL/IA, а не по referer’у.
Для сущностей (игра/статья) брать основную категорию (или «хлебную» категорию), а не случайные теги.
Для динамических страниц (фильтры, сортировки) — крошки указывают путь до базового раздела, а контекст показывается отдельно (чипы фильтров).
При мультитенантности добавлять контекст бренда/оператора в начале или в селекторе рядом, но не перегружать крошки.

6) Фильтры, сортировка, пагинация

Фильтры не должны «удлинять» крошки. Отображайте их ниже в чипах («Провайдеры › Live» + чипы: Geo=CA, Device=Mobile).
Пагинация не входит в крошки; текущая страница показывается в контроле списка.
Сброс фильтров по клику на родительский уровень: возврат к «чистой» категории.

7) Мобильный UX

Размещать крошки под H1 одной строкой; при нехватке места — горизонтальный скролл или усечение средних звеньев.
Тап-таргеты ≥ 44px, заметный фокус при клавиатурной навигации (для PWA).
Не дублировать системный «Назад» — крошки для структуры, кнопка — для истории.

8) Доступность (A11y)

Использовать семантику `nav[aria-label="breadcrumb"]` и `ol > li`.
Указывать `aria-current="page"` на последнем элементе.
Контраст ссылок соответствует WCAG AA; фокус — видимый.
Иконка/разделитель — не единственный сигнал (есть текстовые лейблы).
Порядок в DOM соответствует визуальному порядку.

9) SEO и данные

Для контентных страниц использовать структурированные данные BreadcrumbList (JSON-LD).
Канонические URL и стабильные крошки помогают поиску понимать иерархию.
Не индексировать «пустые» промежуточные узлы без контента (избегать thin pages).

10) Паттерны отображения

Классический ряд: `Главная › Раздел › Подраздел › Страница`.
С усечением: `Главная › … › Категория › Карточка`.
С контекстом бренда (B2B): `Brand A › Отчеты › Доход › NGR`.
С якорями в доках: `Документация › KYC › #Уровни-проверки` (якорь — в TOC, крошки — до раздела).

11) Поведение и микроинтеракции

Hover/focus подсвечивает ссылку и область клика (вся «крошка», а не только текст).
Последняя «крошка» может иметь доп.меню с соседними сущностями (например, другие игры этого провайдера) — аккуратно, не перегружая.
Переход «на уровень выше» сохраняет позицию/страницу списка, если это не ломает канонику (например, к `?page=2`).

12) Метрики и телеметрия

• `breadcrumb_click(level, label, url)`
• `breadcrumb_expand_more` (для усеченных)
• `back_to_parent_retained_context` (если сохранили позицию/страницу)

• Use Rate: доля пользователей, кликнувших по крошкам на глубине ≥2.
• Back-bounce ↓: снижение количества «назад» сразу после входа на глубокой странице.
• Time-to-Parent: время возврата на уровень выше.
• SEO CTR: изменение CTR страниц с разметкой крошек.

13) Примеры для iGaming

B2C (казино): `Главная › Провайдеры › Pragmatic Play › Gates of Olympus`. На странице провайдера — чипы фильтров (Live/Slots/Megaways); крошки — только структура.
Турниры: `Главная › Турниры › Осенний кубок › Правила`.
B2B (провайдер): `Панель › Контент › Релизы › Book of Ra (ID 12345)` — последний элемент не кликабелен; рядом кнопка «Открыть в операторе».

14) Антипаттерны

Крошки, которые повторяют H1 слово-в-слово без пользы.
Исторические маршруты вместо структуры (хаотичная «вереница»).
Включение фильтров и пагинации в крошки («Игры › Слоты › page=5»).
Последняя крошка — ссылка на саму себя.
Избыточная глубина, мелкий размер, низкий контраст — «невидимые крошки».
Несогласованные названия звеньев с меню/URL.

15) Чек-лист внедрения

1. Карта IA: определить канонические пути для сущностей.
2. Генератор: функция, строящая крошки из IA/URL (без зависимости от referer).
3. Усечение: правила на глубине >4, popover с полным путем.
4. A11y/SEO: `nav[aria-label]`, `ol/li`, `aria-current`, JSON-LD.
5. Стиль: контраст AA, адаптив на мобайле, разделители, размеры.
6. Контекст: фильтры/сортировки — чипами ниже, не в крошках.
7. Телеметрия: события кликов/expand, Time-to-Parent, back-bounce.
8. Документация: примеры, анти-кейсы, гайд по именованию звеньев.

16) Итог

1. основанными на канонической иерархии,

2. читаемыми и доступными,

3. устойчивыми к фильтрам/состояниям страницы,

4. с измеримой пользой (телеметрия/SEO).

Так они действительно помогают ориентироваться и сокращают путь пользователя к цели.