Дизайн хлебных крошек (Breadcrumbs) сайта
Breadcrumbs — навигационный паттерн, показывающий положение текущей страницы в иерархии сайта. Полезны на сайтах с тремя и более уровнями вложенности. На плоских сайтах (главная → страница) breadcrumbs избыточны и захламляют интерфейс.
Когда breadcrumbs нужны
Нужны:
- Интернет-магазин: Главная → Электроника → Ноутбуки → Lenovo ThinkPad X1
- Документация: Docs → API Reference → Authentication → OAuth 2.0
- Корпоративный сайт с разделами глубже второго уровня
- Блог с категориями и подкатегориями
Не нужны:
- Лендинг или одностраничный сайт
- Любой сайт глубиной максимум 2 уровня
- Мобильные приложения с back-навигацией в хедере
Три вида breadcrumbs
Location breadcrumbs — самый распространённый вариант. Отражают иерархию сайта:
Главная / Услуги / Веб-разработка / E-commerce
Attribute breadcrumbs — используются в e-commerce. Показывают применённые фильтры/категории, а не только путь:
Главная / Ноутбуки / 15" / Intel Core i7
Path breadcrumbs (history) — показывают реальный путь пользователя. Редко используются — непредсказуемы для пользователя, плохо сочетаются с прямыми ссылками и обновлением страницы.
Анатомия компонента
Минимальная структура: ссылки, разделённые сепаратором. Текущая страница — последний элемент, обычно не является ссылкой (или ссылка на саму себя без смысла).
Сепараторы:
-
/— универсальный, минималистичный -
›или>— направленный, подчёркивает иерархию - Иконка chevron — визуально чище, но требует иконочного шрифта или SVG
Типографика:
- Размер: 12–14px, на 2–4px меньше основного текста
- Цвет ссылок: secondary color или gray-500/600 (не primary — чтобы не конкурировать с основными CTA)
- Текущая страница: gray-900 (dark) без подчёркивания
Hover-состояние ссылок: underline или color change, не обе сразу.
Усечение длинных хлебных крошек
При глубокой иерархии или на мобильных устройствах breadcrumbs не помещаются в одну строку. Два подхода:
Ellipsis collapse — средние элементы скрываются под ... или иконкой:
Главная / ... / Ноутбуки / ThinkPad X1
При клике на ... — разворачивается полный путь.
Scroll — breadcrumbs прокручиваются горизонтально с overflow-x: auto и скрытым scrollbar. Первый и последний элемент всегда видны.
Для мобильных устройств вариант с показом только одного предыдущего уровня (← Ноутбуки) работает лучше полного breadcrumb trail.
SEO и структурированные данные
Breadcrumbs важны не только для UX, но и для SEO. Google поддерживает BreadcrumbList в JSON-LD:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Главная", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Ноутбуки", "item": "https://example.com/notebooks/" },
{ "@type": "ListItem", "position": 3, "name": "ThinkPad X1" }
]
}
Эти данные отображаются в сниппете поиска — сайт занимает больше места в выдаче.
Сроки
Дизайн компонента breadcrumbs со всеми вариантами (стандарт, collapsed, mobile, hover/active состояния) — 1 день: разработка в Figma с Auto Layout и всеми вариантами, спецификация для разработки.