Проектування хлібних крошок (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 (темний) без підкреслення
Hover-стан посилань: підкреслення або зміна кольору, не обидва відразу.
Усічення довгих хлібних крошок
При глибокій ієрархії або на мобільних пристроях 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/laptops/" },
{ "@type": "ListItem", "position": 3, "name": "ThinkPad X1" }
]
}
Ці дані відображаються у сніпеті пошуку — сайт займає більше місця у видачі.
Терміни
Проектування компонента breadcrumbs з усіма варіантами (стандарт, collapsed, mobile, hover/active стани) — 1 день: розробка у Figma з Auto Layout й усіма варіантами, специфікація для розробки.