Html хлебные крошки: Как создать хлебные крошки

Что такое «хлебные крошки» и для чего они нужны

«Хлебные крошки» (от англ. «breadcrumbs») — это навигационная цепочка на сайте, которая отражает путь до текущей страницы. «Хлебные крошки» используются не только на сайтах, но и в операционных системах, СМS, файловых менеджерах (собственно, оттуда они и пришли в сайтостроение). В этих случаях они показывают путь к корневой папке.

Навигационная цепочка в CMS Битрикс

На сайте «хлебные крошки» дублируют меню, которое является основным элементом навигации.

«Хлебные крошки» дублируют разделы верхнего и бокового меню

В статье разберемся:

• для чего использовать эту дублирующую навигацию на сайте;
• как она влияет на юзабилити и SEO;
• как ее реализовать.

Для чего используются «хлебные крошки»

В 1995 году Якоб Нильсен сформулировал 10 принципов юзабилити, первый из которых — «Видимость статуса системы». Это означает, что пользователь должен понимать, что сейчас происходит в системе. Одно из проявлений этого принципа — пользователь всегда должен знать, в какой части сайта он находится. Именно для реализации этого принципа нужны «хлебные крошки». Причем навигационная цепочка необходима всем типам сайтов, в которых есть логическая вложенность разделов: информационным, интернет-магазинам, сайтам услуг, корпоративным сайтам.

С точки зрения юзабилити «хлебные крошки» решают три задачи:

1. Информируют пользователя о его текущем местонахождении на сайте.
2. Наглядно демонстрируют структуру ресурса.
3. Позволяют быстро переместиться на более высокий уровень вложенности, минуя кнопку браузера «Назад».

Помимо положительного влияния на юзабилити дублирующая навигация имеет SEO-эффект:

• является естественным элементом перелинковки страниц;
• улучшает поведенческие метрики (время на сайте и глубину просмотра) за счет упрощения навигации;
• при условии настроенной микроразметки улучшает внешний вид и повышает кликабельность сниппета в поиске Google — формирует «читабельную» навигационную цепочку.

Так выглядит размеченная навигационная цепочка в сниппете в выдаче Google

Навигационная цепочка в сниппете на поиске Яндекса формируется автоматически. Приоритет имеют большие ресурсы с четкой структурой. Названия поисковик подтягивает из тегов title или анкорных текстов ссылок на страницы.

Навигационная цепочка в сниппете в выдаче Яндекса

Какими бывают «хлебные крошки»

Навигационная цепочка может быть организована по разным принципам. Это зависит от структуры сайта и от способа формирования динамических страниц.

• Линейный принцип.

Это самый распространенный вариант — указывается полный путь от главной страницы до текущей. Пример — на рисунке ниже:

Здесь показана следующая структура вложенности: главная страница — «Мебельный центр», затем следует страница каталога товаров, далее — раздел «Кухни», далее — «Кухонные гарнитуры» и, наконец, название конкретного гарнитура.

При очень сложной структуре сайта встречается урезанный вариант «хлебных крошек»:

В магазине Amazon «крошки» начинаются не с главной, а с названия раздела каталога. На скриншоте видно, что «началом отсчета» является раздел магазина «Home & Kitchen».

• Принцип «Назад».

Суть метода заключается в том, что вместо навигационной цепочки размещается ссылка «На предыдущую страницу», «Назад в каталог» и т. п., фактически дублирующая кнопку браузера «Назад». Этот подход удобен, если на сайте используется функция поиска

На скриншоте кнопка «Results» ведет с карточки товара на страницу с результатами поиска по запросу «Shoes».

• Комбинация двух предыдущих вариантов.

В этом случае доступна и линейная навигационная цепочка, и кнопка «Назад». В правильном исполнении такая комбинация подходит для страниц, которые пользователи нашли через функцию поиска на сайте. Но бывает и неудачное исполнение, когда кнопка «Назад» присутствует на всех карточках, вне зависимости от того, искали их через поиск или нет:

В этом примере ссылки «Футболки мужские» и «Назад к обзору» дублируются, что негативно сказывается на юзабилити и SEO.

• Динамический принцип.

Навигационная цепочка формируется в зависимости от пути пользователя. Это часто используется в интернет-магазинах, где товары или категории могут находиться одновременно в нескольких разделах:

В этом случае посетитель сайта сможет вернуться на ту страницу, с которой он пришел.

• «Хлебные крошки» с выпадающим меню.

Эта функция позволяет пользователям перейти не только на уровень выше, но и на другие разделы каждого уровня:

• Атрибутивный принцип.

Используется интернет-магазинами и онлайн-каталогами. Содержание и путь страницы формируется на основе заданных пользователем свойств и фильтров.

Удаляя и добавляя свойства, пользователь каждый раз формирует уникальный «путь» к странице с товарами. Такой принцип улучшает юзабилити:

• пользователь формирует нужную выдачу товаров на странице каталога при помощи фильтров;
• заходит в карточку товара для просмотра детальной информации;
• возвращается на страницу каталога с сохраненными фильтрами.

Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку.

Как создать правильные «хлебные крошки»

Создать навигационную цепочку можно разными способами:

1. Использовать стандартные компоненты или модули CMS (например, так это реализовано соответственно в Битриксе и Joomla!).
2. При помощи плагинов. Для популярных систем управления есть расширения, которые автоматически настроят «хлебные крошки». Вот примеры для WordPress, Opencart, Drupal.
3. Если готовые решения по какой-то причине недоступны, программист добавит цепочку на сайт при помощи 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 блиц

date» data-date=»1552893827″ data-type=»default» title=»18.03.2019 10:23:47 (Europe/Moscow)»>18 мар 201918.03.2019

Хлебные крошки (навигационная цепочка) — элемент навигации сайта, показывающий путь в структуре ресурса от главной страницы к текущей, на которой в данный момент находится пользователь.

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 новых предметов.

1. Панировочные сухари 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

хлебные крошки с настраиваемыми свойствами CSS в качестве API.
Сделано Стасом Мельниковым

15 июня 2017 г.

скачать демо и код

Демонстрационное изображение: Многострочные стрелки навигации

Многострочные стрелки навигации

Адаптивные многострочные стрелки навигации чистого CSS.
Сделано Глинном Смитом
30 мая 2017 г.

скачать демо и код

Демонстрационный GIF: хлебные крошки

хлебные крошки

хлебные крошки HTML и CSS.
Сделано Дэни Сантос
15 июля 2016 г.

скачать демо и код

Демонстрационное изображение: Breadcrumb, Progress Tracker

Хлебные крошки, трекер прогресса

Хлебные крошки Material Design, трекер прогресса.
Автор Шьям Чен
30 июля 2015 г.

скачать демо и код

Демонстрационное изображение: Свернутые навигационные крошки

Свернутые навигационные крошки

Список навигационных цепочек свернут, чтобы показать только текст предварительного просмотра для всех страниц, кроме текущей, с полным текстом, отображаемым при наведении/фокусе.

Сделано Скай
4 марта 2015 г.

скачать демо и код

Демонстрационное изображение: Адаптивные хлебные крошки

Адаптивные хлебные крошки

Адаптивные хлебные крошки на чистом CSS.
Сделано Оливером Кноблихом
2 апреля 2014 г.

скачать

Demo GIF: Tiny CSS3 Breadcrumb

Tiny 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

5

0 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

Зависимости:

Посмотреть код и демонстрацию

Расширяемая навигационная цепочка

Еще одна расширяемая навигационная цепочка для случаев, когда пространство в вашем веб-приложении ограничено, очень полезно, когда элементы имеют длинный текст.