Bootstrap Breadcrumb – Компонент для создания хлебных крошек

В этой статье мы познакомимся с процессом создания хлебных крошек (навигационных цепочек) для страниц сайта на Bootstrap 3 и 4 версии.

Назначение хлебных крошек

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

Их основное назначение – это показать текущее местоположение пользователя в иерархической структуре сайта и обеспечить навигацию по ней.

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

Таким образом, хлебные крошки – это ещё один вариант навигации, который помогает пользователям ориентироваться в структуре сайта и перемещаться по его страницам.

Создание хлебных крошек в Bootstrap

В фреймворке Bootstrap создание хлебных крошек осуществляется с помощью компонента Breadcrumb. По сути этот компонент – это просто набор стилей, которые нужно добавить к определённой HTML разметке через классы.

HTML код хлебных крошек в Bootstrap 4:

<ol>
  <li><a href="#">Каталог</a></li>
  <li><a href="#">Смартфоны</a></li>
  <li>6.47" Смартфон Huawei P30 Pro 256 ГБ черный</li>
</ol>

Из кода видно, что процесс создания хлебных крошек состоит из добавления на страницу элемента <ol> с классом breadcrumb. Далее в <ol> необходимо поместить нужное количество элементов <li> с классом breadcrumb-item. Эти элементы будут определять навигационную цепочку до текущей страницы. После этого в <li> необходимо поместить <a> с атрибутом href

и текстом.

Если хлебные крошки должны заканчиваться названием текущей страницы, то в этом случае в последний элемент <li> нужно просто поместить её название и добавить к нему класс active. Создавать ссылку в этом случае не нужно, т.к. в ней нет никакого смысла, да и с точки зрения SEO это неправильно.

В Bootstrap 3 хлебные крошки создаются аналогично (посредством нумерованного списка) за исключением только того, что к элементам li не нужно добавлять класс breadcrumb-item:

<ol>
  <li><a href="#">Каталог</a></li>
  <li><a href="#">Смартфоны</a></li>
  <li>6.47" Смартфон Huawei P30 Pro 256 ГБ черный</li>
</ol>

Для сведения, разделитель элементов списка в Bootstrap CSS («bootstrap.css») добавляется на страницу через псевдоэлемент ::before следующим образом:

/* Bootstrap 3 */
. breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}

/* Bootstrap 4 */
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

Примеры хлебных крошек:

<!-- Bootstrap 4 -->
<ol>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Ноутбуки, планшеты, компьютеры</a></li>
  <li><a href="#">Ноутбуки</a></li>
  <li><a href="#">Ноутбуки Apple MacBook</a></li>
  <li><a href="#">Apple</a></li>
</ol>

<!-- Bootstrap 4 -->
<ol>
  <li><a href="#">Каталог</a></li>
  <li><a href="#">Комплектующие, компьютеры и ноутбуки</a></li>
  <li><a href="#">Периферия и аксессуары</a></li>
  <li><a href="#">Мыши</a></li>
  <li>Компактная мышь проводная Defender Patch MS-759 черный</li>
</ol>

Создание хлебных крошек со своим оформлением

На сайте, построенном на Bootstrap, оформление хлебных крошек вы можете выполнять не только с помощью стилей, которые идут по умолчанию с этим фреймворком.

При необходимости вы можете написать свои.

Но перед тем как переходить к их созданию желательно убрать компонент Breadcrumb из Bootstrap. Это позволит немного уменьшить размер CSS файла этого фреймворка. В противном случае у вас в «bootstrap.css» останутся стили, которые на сайте вы нигде не используете. Как изменить сборку под свой проект подробно описано в этой статье (если вы используете Bootstrap 3, то здесь).

Например рассмотрим как создать хлебные крошки со следующим оформлением:

HTML структуру крошек оставим как в Bootstrap 4:

<ol>
  <li><a href="#">Компоненты</a></li>
  <li><a href="#">pdoTools</a></li>
  <li>Парсер</li>
</ol>

Напишем стили:

/* пример стилей */
.breadcrumb {
  list-style: none;
  display: flex;
  padding-left: 0px;
}

.breadcrumb-item>a,
.breadcrumb-item.active {
  color: #fff;
  display: block;
  background: #7b1fa2;
  text-decoration: none;
  position: relative;
  height: 34px;
  line-height: 34px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
  user-select: none;
}

. breadcrumb-item:first-child>a {
  padding-left: 15px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.breadcrumb-item:last-child>a,
.breadcrumb-item.active {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-right: 0;
  padding-right: 15px;
}

.breadcrumb-item:first-child>a::before,
.breadcrumb-item:last-child>a::after {
  border: none;
}

.breadcrumb-item>a::before,
.breadcrumb-item>a::after,
.breadcrumb-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #7b1fa2;
  border-width: 17px 10px;
  width: 0;
  height: 0;
}

.breadcrumb-item>a::before,
.breadcrumb-item.active::before {
  left: -20px;
  border-left-color: transparent;
}

.breadcrumb-item>a::after {
  left: 100%;
  border-color: transparent;
  border-left-color: #7b1fa2;
}

. 
  breadcrumb-item>a:hover {
  background-color: #6a1b9a;
}

.breadcrumb-item>a:hover::before {
  border-color: #6a1b9a;
  border-left-color: transparent;
}

.breadcrumb-item>a:hover::after {
  border-left-color: #6a1b9a;
}

.breadcrumb-item.active {
  color: #6a1b9a;
  background-color: #f3e5f5;
}

.breadcrumb-item.active::before {
  border-color: #f3e5f5;
  border-left-color: transparent;
}

Хлебные крошки — SEO на vc.ru

{«id»:13855,»url»:»\/distributions\/13855\/click?bit=1&hash=fa96f0d9bc09f6eab8f9bc71bc54fe7ccf952b29caa9d3d65c7f24e6b7515a45″,»title»:»\u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u00ab\u0432\u0435\u0433\u0430\u043d\u0441\u043a\u043e\u0435\u00bb \u043c\u044f\u0441\u043e \u0432 \u0420\u043e\u0441\u0441\u0438\u0438 \u0435\u0434\u044f\u0442 \u043d\u0435 \u0432\u0435\u0433\u0430\u043d\u044b»,»buttonText»:»\u0410 \u043a\u0442\u043e?»,»imageUuid»:»7c5e1ede-4e9f-5230-a65d-9dcd95a74e0e»,»isPaidAndBannersEnabled»:false}

SEO

SEO блиц

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

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

18 123 просмотров

Хлебные крошки выполняют ряд важных функций:

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

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

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

• Хлебные крошки должны содержать все промежуточные страницы.
• Если в хлебных крошках отображается текущая страница последним элементом, она не должна содержать ссылку сама на себя.
• Для отображения навигационной цепочки на странице результатов поиска 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

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

Pug

Stylus

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

Хлебные крошки с цветами 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

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

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

Точечные навигационные крошки

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

Сделано с:

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

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

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

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

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