Что такое «хлебные крошки» и для чего они нужны
«Хлебные крошки» (от англ. «breadcrumbs») — это навигационная цепочка на сайте, которая отражает путь до текущей страницы. «Хлебные крошки» используются не только на сайтах, но и в операционных системах, СМS, файловых менеджерах (собственно, оттуда они и пришли в сайтостроение). В этих случаях они показывают путь к корневой папке.
Навигационная цепочка в CMS Битрикс
На сайте «хлебные крошки» дублируют меню, которое является основным элементом навигации.
«Хлебные крошки» дублируют разделы верхнего и бокового меню
В статье разберемся:
- для чего использовать эту дублирующую навигацию на сайте;
- как она влияет на юзабилити и SEO;
- как ее реализовать.
Для чего используются «хлебные крошки»
В 1995 году Якоб Нильсен сформулировал 10 принципов юзабилити, первый из которых — «Видимость статуса системы». Это означает, что пользователь должен понимать, что сейчас происходит в системе.
Одно из проявлений этого принципа — пользователь всегда должен знать, в какой части сайта он находится. Именно для реализации этого принципа нужны «хлебные крошки». Причем навигационная цепочка необходима всем типам сайтов, в которых есть логическая вложенность разделов: информационным, интернет-магазинам, сайтам услуг, корпоративным сайтам.
С точки зрения юзабилити «хлебные крошки» решают три задачи:
- Информируют пользователя о его текущем местонахождении на сайте.
- Наглядно демонстрируют структуру ресурса.
- Позволяют быстро переместиться на более высокий уровень вложенности, минуя кнопку браузера «Назад».
Помимо положительного влияния на юзабилити дублирующая навигация имеет SEO-эффект:
- является естественным элементом перелинковки страниц;
- улучшает поведенческие метрики (время на сайте и глубину просмотра) за счет упрощения навигации;
- при условии настроенной микроразметки улучшает внешний вид и повышает кликабельность сниппета в поиске Google — формирует «читабельную» навигационную цепочку.
Так выглядит размеченная навигационная цепочка в сниппете в выдаче Google
Навигационная цепочка в сниппете на поиске Яндекса формируется автоматически. Приоритет имеют большие ресурсы с четкой структурой. Названия поисковик подтягивает из тегов title или анкорных текстов ссылок на страницы.
Навигационная цепочка в сниппете в выдаче Яндекса
Какими бывают «хлебные крошки»
Навигационная цепочка может быть организована по разным принципам. Это зависит от структуры сайта и от способа формирования динамических страниц.
- Линейный принцип.
Это самый распространенный вариант — указывается полный путь от главной страницы до текущей. Пример — на рисунке ниже:
Здесь показана следующая структура вложенности: главная страница — «Мебельный центр», затем следует страница каталога товаров, далее — раздел «Кухни», далее — «Кухонные гарнитуры» и, наконец, название конкретного гарнитура.
При очень сложной структуре сайта встречается урезанный вариант «хлебных крошек»:
В магазине Amazon «крошки» начинаются не с главной, а с названия раздела каталога.
На скриншоте видно, что «началом отсчета» является раздел магазина «Home & Kitchen».
- Принцип «Назад».
Суть метода заключается в том, что вместо навигационной цепочки размещается ссылка «На предыдущую страницу», «Назад в каталог» и т. п., фактически дублирующая кнопку браузера «Назад». Этот подход удобен, если на сайте используется функция поиска
На скриншоте кнопка «Results» ведет с карточки товара на страницу с результатами поиска по запросу «Shoes».
- Комбинация двух предыдущих вариантов.
В этом случае доступна и линейная навигационная цепочка, и кнопка «Назад». В правильном исполнении такая комбинация подходит для страниц, которые пользователи нашли через функцию поиска на сайте. Но бывает и неудачное исполнение, когда кнопка «Назад» присутствует на всех карточках, вне зависимости от того, искали их через поиск или нет:
В этом примере ссылки «Футболки мужские» и «Назад к обзору» дублируются, что негативно сказывается на юзабилити и SEO.
- Динамический принцип.
Навигационная цепочка формируется в зависимости от пути пользователя. Это часто используется в интернет-магазинах, где товары или категории могут находиться одновременно в нескольких разделах:
В этом случае посетитель сайта сможет вернуться на ту страницу, с которой он пришел.
- «Хлебные крошки» с выпадающим меню.
Эта функция позволяет пользователям перейти не только на уровень выше, но и на другие разделы каждого уровня:
- Атрибутивный принцип.
Используется интернет-магазинами и онлайн-каталогами. Содержание и путь страницы формируется на основе заданных пользователем свойств и фильтров.
Удаляя и добавляя свойства, пользователь каждый раз формирует уникальный «путь» к странице с товарами. Такой принцип улучшает юзабилити:
- пользователь формирует нужную выдачу товаров на странице каталога при помощи фильтров;
- заходит в карточку товара для просмотра детальной информации;
- возвращается на страницу каталога с сохраненными фильтрами.
Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку.
Как создать правильные «хлебные крошки»
Создать навигационную цепочку можно разными способами:
- Использовать стандартные компоненты или модули CMS (например, так это реализовано соответственно в Битриксе и Joomla!).
- При помощи плагинов. Для популярных систем управления есть расширения, которые автоматически настроят «хлебные крошки». Вот примеры для WordPress, Opencart, Drupal.
- Если готовые решения по какой-то причине недоступны, программист добавит цепочку на сайт при помощи PHP или CSS.
Какой бы способ вы ни выбрали, придерживайтесь следующих правил:
- «Хлебные крошки» создаются прежде всего для удобства посетителей сайта, поэтому используйте их, когда они действительно будут полезны.
Не обязательно добавлять их на каждый сайт — например, одностраничники прекрасно живут и без «хлебных крошек». - «Хлебные крошки» — это не замена основному меню, а лишь вспомогательный инструмент навигации.
- Не стоит специально подгонять текстовые анкоры в навигационных ссылках под ключевые фразы. Исключение — если ключевые фразы гармонично вписываются в логику навигации. В противном случае рискуете попасть под фильтры поисковых систем за переспам.
- Если используете линейную навигацию, прописывайте путь до самого конца, чтобы не сбивать посетителей с толку:
- Уберите циклические ссылки — последний элемент навигационной цепочки не должен быть кликабельным (как на рисунке ниже), его нужно прописать в виде текста:
- Если используете «хлебные крошки», располагайте их на каждой странице сайта в одном и том же месте.
- На главной странице сайта «хлебные крошки» не нужны.
- Сделайте микроразметку «хлебных крошек», используя микроформаты Microdata и RDFa — это позволит информативно отображать их в результатах поиска Google (инструкцию и примеры реализации кода можно найти в справке Google для вебмастеров):
- Проверьте правильность разметки при помощи инструментов поисковых систем: валидатора микроразметки в Яндекс.
Вебмастере и проверки структурированных данных от Google. - Впишите дублирующую навигацию гармонично в общий дизайн сайта, чтобы она не выглядела чужеродно.
Подводим итоги
«Хлебные крошки» — это важный навигационный элемент, который повышает юзабилити ресурса и влияет на SEO. Они помогают пользователям ориентироваться на сайте и в один клик переходить в нужный раздел. В результате это может положительно влиять на поведенческие показатели и конверсию.
Однако этот элемент юзабилити может работать с точностью до наоборот, если допустить ошибки в реализации. Практика показывает, что такое может случиться при создании веб-ресурса на базе конструкторов или CMS с открытым исходным кодом — если не проконтролировать результат.
Хотите проверить, насколько грамотно и корректно формируются «хлебные крошки» на вашем сайте? Сделайте это в рамках продвинутого SEO-аудита в PromoPult.
Хлебные крошки — SEO на vc.ru
{«id»:13772,»url»:»\/distributions\/13772\/click?bit=1&hash=93a368816b1e347dfad2882f455fc9bb4606ce94b2370bda4e82b172745bc14e»,»title»:»\u00ab\u041c\u0430\u0440\u043a\u0435\u0442\u00bb \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0440\u0435\u0444\u0435\u0440\u0430\u043b\u043a\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u043e\u0432″,»buttonText»:»\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c»,»imageUuid»:»d09521f5-ee9c-5e06-8358-733cd4596e9d»,»isPaidAndBannersEnabled»:false}
SEO
SEO блиц
Хлебные крошки (навигационная цепочка) — элемент навигации сайта, показывающий путь в структуре ресурса от главной страницы к текущей, на которой в данный момент находится пользователь.
17 328 просмотров
Хлебные крошки выполняют ряд важных функций:
- улучшают юзабилити и делают понятным расположение страницы в структуре сайта;
- повышают удобство навигации по сайту;
- участвуют в перелинковке страниц и распределении ссылочного веса;
- улучшают представление сниппета в результатах поиска.
Как сделать правильные хлебные крошки?
Наличие хлебных крошек уместно на любом сайте, но есть ряд требований, которые необходимо соблюдать для их корректного функционирования.
- Хлебные крошки должны содержать все промежуточные страницы.
- Если в хлебных крошках отображается текущая страница последним элементом, она не должна содержать ссылку сама на себя.
- Для отображения навигационной цепочки на странице результатов поиска Google необходимо выполнить микроразметку хлебных крошек.
Микроразметка хлебных крошек
Микроразметка осуществляется путем добавления специальных HTML-тегов, которые сообщают поисковым роботам к какому типу контента относится элемент.
Поддерживаемые Google форматы микроразметки:
- Microdata;
- RDFa;
- JSON-LD.
Пример микроразметки хлебных крошек в формате Microdata для страницы «Кружки», которая имеет навигационную цепочку из ссылок «Главная > Каталог > Столовая > Чай и кофе»:
<ol itemscope itemtype=»http://schema.
org/BreadcrumbList»>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/»>
<span itemprop=»name»>Главная</span></a>
<meta itemprop=»position» content=»1″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/catalog/»>
<span itemprop=»name»>Каталог</span></a>
<meta itemprop=»position» content=»2″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/catalog/stolovaya/»>
<span itemprop=»name»>Столовая</span></a>
<meta itemprop=»position» content=»3″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=» /catalog/stolovaya/chay-i-kofe/»>
<span itemprop=»name»>Чай и кофе</span></a>
<meta itemprop=»position» content=»4″ />
</li>
</ol>
itemscope itemtype=http://schema.
org/BreadcrumbList говорит о том, что элемент относится к хлебным крошкам и состоит из цепочки связанных веб страниц.
Далее каждому элементу навигации добавляем следующие атрибуты:
- itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem — означает , что элемент относится к отдельному пункту списка;
- itemprop=»item» — для разметки ссылки;
- itemprop=»name»> — у тега с названием хлебной крошки;
- В конце блока хлебной крошки добавляем <meta itemprop=»position» content=»%number%» />, который определяет позицию элемента в навигационной цепочке.
Существует известная проблема в том, что валидатор микроразметки выдает предупреждение, когда в коде нет атрибута itemprop=»item» у последнего элемента хлебной крошки. Это возникает из-за отсутствия у элемента ссылки.
Но это не мешает поисковой системе Google корректно выстраивать цепочку ссылок в сниппете.
Если же вас смущает это предупреждение, то можно не размечать последний элемент (как у нас в примере), либо же использовать другие способы микроразметки.
Ждите новые заметки в блоге или ищите на нашем сайте.
20 навигационных крошек CSS
Коллекция бесплатных примеров навигационного кода HTML и CSS (простых, адаптивных, многострочных, свернутых и т. д.) из codepen и других ресурсов. Обновление декабрьской коллекции 2019 года. 5 новых предметов.
- Панировочные сухари Bootstrap
О коде
Дизайн панировочных сухарей
Дизайн хлебных крошек (перекос, радиус границы, эффект щелчка).
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Панировочные сухари
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Панировочные сухари Компонент
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Эксперимент с хлебными крошками
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Рефакторинг пользовательского интерфейса — хлебные крошки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Панировочные сухари для нарезки CSS
Хлебные крошки показывают иерархию контента между корнем сайта и текущим местоположением пользователя.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Вертикальная хлебная крошка
Простые вертикальные хлебные крошки CSS .
О коде
Хлебные крошки с раскрывающейся навигацией
Не стесняйтесь настраивать его по своему усмотрению. Цвета, размеры, тени, границы и т. д. Сделано с помощью Bootstrap
О коде
Панировочные сухари с «умным» многоточием (Flex)
Поэкспериментируйте с размером браузера, чтобы увидеть, как хлебных крошек ведут себя, когда для них не осталось места.
О коде
Навигация по хлебным крошкам
В этом примере показано, что происходит, когда пользователь приближается к кнопке «Назад». Хлебные крошки расширяются и позволяют пользователю перемещаться практически в любое другое место в курсе, минимально воздействуя на пространство.
хлебные крошки CSS
хлебные крошки с настраиваемыми свойствами CSS в качестве API.
Сделано Стасом Мельниковым
скачать демо и код
Демонстрационное изображение: Многострочные стрелки навигацииМногострочные стрелки навигации
Адаптивные многострочные стрелки навигации чистого CSS.
Сделано Глинном Смитом
30 мая 2017 г.
скачать демо и код
Демонстрационный GIF: хлебные крошкихлебные крошки
хлебные крошки HTML и CSS.
Сделано Дэни Сантос
15 июля 2016 г.
скачать демо и код
Демонстрационное изображение: Breadcrumb, Progress TrackerХлебные крошки, трекер прогресса
Хлебные крошки Material Design, трекер прогресса.
Автор Шьям Чен
30 июля 2015 г.
скачать демо и код
Демонстрационное изображение: Свернутые навигационные крошкиСвернутые навигационные крошки
Список навигационных цепочек свернут, чтобы показать только текст предварительного просмотра для всех страниц, кроме текущей, с полным текстом, отображаемым при наведении/фокусе.
Сделано Скай
4 марта 2015 г.
скачать демо и код
Демонстрационное изображение: Адаптивные хлебные крошкиАдаптивные хлебные крошки
Адаптивные хлебные крошки на чистом CSS.
Сделано Оливером Кноблихом
2 апреля 2014 г.
скачать
Demo GIF: Tiny CSS3 BreadcrumbTiny CSS3 Breadcrumb
Крошечная круглая хлебная крошка CSS3.
Сделано Рено Тертре
4 октября 2013 г.
скачать демо и код
Демонстрационное изображение: Расширяемые хлебные крошкиРасширяемые хлебные крошки
Сделано Фелипе М Перес
3 октября 2013 г.
скачать демо и код
Демонстрационное изображение: плоская навигационная крошка CSS3навигационная крошка CSS3
плоская навигационная цепочка HTML и CSS3.
Сделано Рено Тертре
30 сентября 2013 г.
скачать демо и код
Демонстрационное изображение: навигационная цепочка на чистом CSS3навигационная цепочка на чистом CSS3
Навигация по навигационной цепочке с использованием чистого CSS3.
Сделано Аркев
16 апреля 2013 г.
скачать демо и код
42 отличных примера дизайна хлебных крошек CSS (БЕСПЛАТНЫЙ код)
Навигация по хлебным крошкам Pixel perfect
Симпатичная хлебная крошка в темном режиме с 2 вариантами и приятным эффектом наведения на различные элементы.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Панировочные сухари с закругленными углами
Закругленные углы делают ваш дизайн более дружелюбным.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Простая навигационная цепочка Skew
Простая, но эффективная навигационная цепочка, она имеет 2 варианта, оба используют свойство CSS skew.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Навигация по цепочкам на чистом CSS
В этом фрагменте кода вы найдете навигацию по цепочкам с простым эффектом наведения, использующим только чистый CSS.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Flat CSS3 Breadcrumb
Еще один CodePen с эффективной, но чистой навигацией по цепочкам навигации в плоском стиле.
Сделано с помощью:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Рефакторинг пользовательского интерфейса — хлебные крошки
Фрагмент кода минималистичной, но элегантной хлебной крошки с цветовой палитрой в оттенках серого и легким эффектом наведения.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Стреловидная хлебная крошка
Этот CodePen из стреловидной хлебной крошки показывает, что даже с простым стилем и небольшим количеством кода можно добиться очень хорошего результата.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Вертикальная навигационная цепочка
Вертикальная навигационная цепочка — это другой творческий способ показать путь к странице, на которой вы находитесь, не занимая слишком много места.
Сделано с:
HTML
CSS
Зависимости:
Мопс
Стилус
Посмотреть код и демо
Хлебные крошки с цветами Material Design
В этом CodePen у вас есть трекер прогресса/степпер/хлебные крошки, использующие цвета Material Design и активное состояние при нажатии.
Сделано с:
HTML
CSS
JavaScript
Зависимости:
Pug
Stylus
TypeScript
50 View Code and Demo 0
Tiny CSS3 Round Breadcrumb
Фрагмент кода закругленной хлебной крошки с плавным названием отображается при наведении курсора.
Сделано из:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Хлебные крошки со стрелками
В этом фрагменте кода у нас есть 4 красивых варианта хлебных крошек со стрелочками, 2 светлых и 2 темных.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Стиль хлебных крошек, созданный с помощью Force Framework
CodePen из 7 различных вариантов цветных хлебных крошек, созданных с помощью CSS-фреймворка под названием Force.
Сделано с:
HTML
CSS
Зависимости:
Force framework
Посмотреть код и демо
Пошаговое/хлебные крошки для оплаты кредитной картой
Это скорее пошаговый индикатор оплаты кредитной картой, но его также можно использовать в качестве примера дизайна навигационной крошки.
Сделано с:
HTML
CSS
JavaScript
Зависимости:
Посмотреть код и демонстрацию
Навигационная цепочка с раскрывающимся списком
Фрагмент кода базовой навигационной цепочки со встроенным раскрывающимся списком, который отображается при наведении курсора.
Сделано с:
HTML
CSS
Зависимости:
Tachyons CSS Toolkit
Bootstrap
Посмотреть код и демо
Многострочная хлебная крошка Pure CSS
Нужна дополнительная информация о ваших хлебных крошках? У этого есть многострочная функция для добавления дополнительных данных.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Плоские кнопки навигации
3 варианта с разными цветами плоской навигации и эффектом стрелки при наведении.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Bootstrap Breadcrumb, созданный с помощью Material Design & Bootstrap 4
Если вы поклонник фреймворка Bootstrap, в этом фрагменте кода вы найдете 12 вариантов цветных хлебных крошек с разными разделителями.
Сделано с:
HTML
CSS
Зависимости:
Font Awesome
Посмотреть код и демонстрацию
Topcoatish Breadcrumb
хлебная крошка с темным и светлым режимами, а также вариант с панелью поиска, которая открывается при наведении курсора.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Плоская хлебная крошка с анимацией наведения
В этом CodePen вы найдете красочные хлебные крошки с привлекательной анимацией, когда вы наводите мышь на один из элементов.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Хлебная крошка с анимацией свертывания
Хлебная крошка сворачивания на чистом CSS, которая имеет довольно плавную анимацию отображения заголовка элемента при наведении.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Адаптивные панировочные сухари
Вам нужны панировочные сухари разных размеров? В этом CodePen вы найдете 3 размера базовой адаптивной хлебной крошки.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Панировочные сухари в минималистском стиле
Если вы ищете что-то утонченное, но эффективное, эта панировочная сухарь может быть вашим выбором.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Простая навигационная цепочка
Этот простой дизайн навигационной крошки создан с использованием фреймворка Aqua CSS и имеет приятный эффект плавной линии наведения для различных ссылок.
Сделано с:
HTML
CSS
Зависимости:
Aqua CSS
Посмотреть код и демонстрацию
Ribbon Breadcrumb Trail
Фрагмент кода со старой ленточной цепочкой и небольшим изменением фона при наведении курсора на его элементы.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Расширяющаяся навигационная цепочка со стрелкой
Если у вас недостаточно места для размещения навигационной крошки, вам может подойти этот фрагмент кода с расширяемой стрелкой.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Направляющая цепочка Sharpen
Это наклонная версия навигационной цепочки с привлекательным цветом и типографикой, а также с эффектом наведения, который увеличивает поля элементов.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Навигационная цепочка с контурами
Навигационная цепочка с обведенными, наклоненными элементами и привлекательным эффектом наведения.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Градиентная навигационная цепочка
Этот фрагмент кода содержит стреловидную навигационную цепочку с красивым градиентным цветовым стилем.
Сделано с:
HTML
CSS
Зависимости:
Haml
SCSS
Посмотреть код и демонстрацию
Различные разделители хлебных крошек
В этом CodePen мы можем найти 4 хлебных крошки с одинаковым стилем, но с разными разделителями.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Различные разделители хлебных крошек
Еще один CodePen, который имеет 5 хлебных крошек с похожим стилем, но с другим разделителем.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Свернутая навигационная цепочка
Если места на вашем веб-сайте мало, эта свернутая навигационная цепочка, которая расширяется при наведении указателя мыши на элементы, может удовлетворить ваши потребности.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Наклонная хлебная крошка
3 хлебные крошки с одинаковым наклоном, но с разной степенью сжатия, которые расширяются при наведении на них курсора.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Дизайн хлебных крошек (Перекос, Радиус границы, эффект щелчка)
Еще один фрагмент кода, который имеет 3 похожих хлебных крошки, но с разными уровнями наклона и легким эффектом наведения, созданным только с помощью HTML и CSS.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
«Хлебные крошки» для оформления заказа
«Хлебные крошки», ориентированные на кассу, с иконками и красочным эффектом наведения на элементы.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Список интересных стилей навигационных цепочек
Этот фрагмент кода содержит 9 различных стилей навигационных цепочек, чтобы вы могли найти тот, который соответствует вашим потребностям и стилю.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Розовая крошка
Если розовый — ваш любимый цвет, эта крошка для вас со значками и изменением цвета фона при наведении на нее курсора.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Chevron Breadcrumbs
Этот фрагмент кода содержит навигацию в стиле шеврона с тонким серым стилем.
Сделано с:
HTML
CSS
Зависимости:
Мопс
SCSS
Посмотреть код и демонстрацию
Нахальные хлебные крошки
Креативно оформленная хлебная крошка с приятной цветовой палитрой и подчеркиванием при наведении курсора на текст.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Расширяемая навигационная цепочка
Еще одна расширяемая навигационная цепочка для случаев, когда пространство в вашем веб-приложении ограничено, очень полезно, когда элементы имеют длинный текст.
