Компонент хлебных крошек (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 день.