Компонент хлібних крихт (breadcrumbs) — один із найнедооціненіших елементів навігації. Коли на сайті більше трьох рівнів вкладеності, без них користувачі витрачають у середньому на 40% більше часу на пошук потрібної категорії. За даними Google, сторінки з розміткою BreadcrumbList отримують на 20% більше кліків у видачі. Ми розробили десятки рішень для інтернет-магазинів з каталогами до 10 000 товарів — у кожному випадку breadcrumbs знижували показник відмов на 10–25%. У цій статті розберемо, як спроєктувати хлібні крихти так, щоб вони працювали і на десктопі, і на мобільних, і приносили користь SEO. Напишіть нам — ми допоможемо впровадити компонент за один день.
Коли хлібні крихти необхідні?
Breadcrumbs потрібні на сайтах з глибиною вкладеності від трьох рівнів. Наприклад:
- Інтернет-магазин: Головна → Електроніка → Ноутбуки → Lenovo ThinkPad X1
- Корпоративний портал: Компанія → Відділи → Розробка → Вакансії
- Документація: Docs → API → Authentication → OAuth 2.0
Не потрібні на лендінгах і сайтах з двома рівнями (головна → сторінка). У мобільних додатках можна використовувати кнопку «Назад» замість повного ланцюжка.
Які типи breadcrumbs існують?
| Тип | Опис | Приклад | Коли використовувати |
|---|---|---|---|
| Location | Відображає ієрархію сайту | Головна / Категорія / Підкатегорія / Товар | Для сайтів з чіткою структурою |
| Attribute | Показує застосовані фільтри | Головна / Ноутбуки / 15" / Intel | В інтернет-магазинах з фільтрацією |
| Path (history) | Шлях користувача | Головна → Стаття → Назад → Нова стаття | Рідко, не рекомендується — непередбачуваний |
Location — найпоширеніший (80% проєктів). Attribute зручний в e-commerce, але складніший у реалізації: потребує відстеження стану фільтрів та коректної побудови ланцюжка. Path практично не використовується через плутанину з історією браузера.
Анатомія компонента: що важливо врахувати?
Мінімальна структура: посилання, розділені сепаратором. Поточна сторінка — останній елемент, зазвичай не посилання.
Сепаратори: вибір впливає на сприйняття. Символ › (single right-pointing angle quotation mark) найчастіше використовується в сучасних інтерфейсах — він спрямовує погляд і не захаращує лінію. Коса риска (/) мінімалістична, але на мобільних може виглядати громіздко. Іконка chevron дає чисте візуальне рішення, але потребує додаткових ресурсів на завантаження іконок. Ми рекомендуємо › як найкращий баланс між читабельністю та адаптивністю.
Типографіка: розмір 12–14px, на 2–4px менше основного тексту. Колір посилань — secondary color або gray-500, поточна сторінка — gray-900 без підкреслення. Hover-стан: underline або зміна кольору, не обидва одразу.
Як адаптувати breadcrumbs для мобільних?
На мобільних довгі ланцюжки не поміщаються. Два підходи:
- Collapse — середні елементи ховаються під «...». При кліку розгортаються.
- Scroll — горизонтальне прокручування з hidden scrollbar. Перший і останній елементи завжди видимі.
Найкращий варіант для мобільних — показувати тільки попередній рівень (← Категорія). Ми використовуємо цей підхід у проєктах з відвідуваністю понад 100 000 користувачів на місяць.
Рекомендація щодо адаптивності
Використовуйте CSS `overflow-x: auto` та `white-space: nowrap` для горизонтального скролу. Сховати скролбар можна за допомогою `::-webkit-scrollbar { display: none; }`.Чому breadcrumbs важливі для SEO?
Google враховує структуру сайту. Розмітка Schema.org 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"} ] } Це збільшує займане місце у видачі та покращує CTR на 15–30%. Ми включаємо розмітку в кожен проєкт — гарантуємо сумісність з вимогами пошукових систем. Google Developers: Breadcrumb Structured Data
Що входить у дизайн breadcrumbs?
Розробка компонента включає:
- Аналіз структури сайту та вибір типу breadcrumbs
- Дизайн усіх станів у Figma: standard, hover, active, collapsed, mobile
- Адаптацію під різні роздільні здатності
- Специфікацію для розробників (Auto Layout, відступи, типографіка)
- Код JSON-LD для SEO
- Керівництво зі стилю та використання
- Підтримку після впровадження
Терміни: від 1 дня на базовий компонент, до 3 днів на комплексне рішення з усіма варіантами.
Як ми розробляємо breadcrumbs: процес і терміни
Ми дотримуємося етапів:
- Аналіз — вивчаємо ієрархію сайту, користувацькі сценарії.
- Проєктування — обираємо тип, проєктуємо компонент у Figma.
- Реалізація — передаємо макети розробникам, консультуємо.
- Тестування — перевіряємо відгук, доступність, коректність JSON-LD.
- Деплой — супроводжуємо впровадження.
Багаторічний досвід та понад 150 реалізованих проєктів гарантують якість. Отримайте консультацію — ми обговоримо, як breadcrumbs покращать UX та SEO вашого сайту. Хлібні крихти — простий спосіб підвищити зручність та ранжування. Замовте дизайн під ключ — ми зробимо все за 1 день.