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> с классом

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

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

<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, оформление хлебных крошек вы можете выполнять не только с помощью стилей, которые идут по умолчанию с этим фреймворком. При необходимости вы можете написать свои.

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

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;
}

HTML и CSS. Хлебные крошки (Breadcrumbs)

<ol>
    <li>
        <a href="http://know-online.com/">Главная</a>
    </li>
    <li>
        <a href="http://know-online.com/category">Раздел</a>
    </li>
    <li>
        <a href="http://know-online.com/category/page">Страница</a>
    </li>
</ol>

Дальше остаётся их оформить в CSS. Пример на JSFiddle.

Название «Хлебные крошки» является отсылкой к сказке «Гензель и Гретель» братьев Гримм, где дети оставляли хлебные крошки в лесу, чтобы по ним вернуться домой.

Для хлебных крошек можно сделать микроразметку, чтобы оформить их в поисковых системах.

Код микроразметки для хлебных крошек выглядит следующим образом:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://know-online.com/arts"><span itemprop="name">Arts</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://know-online.com/arts/books"><span itemprop="name">Books</span></a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://know-online.com/arts/books/poetry"><span itemprop="name">Poetry</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ol>

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

<div aria-label="breadcrumb">
    <ol>
        <li>
            <a href="http://know-online.com/">Главная</a>
        </li>
        <li>
            <a href="http://know-online.com/category">Раздел</a>
        </li>
        <li>
            <a href="http://know-online.com/category/page" aria-current="page">Страница</a>
        </li>
    </ol>
</div>

Как сделать хлебные крошки на сайте с помощью CSS

За последнее время CSS и CSS3 сильно продвинулись вперед и поэтому старые стили, которые используют картинки на заднем фоне для получения нужной фигуры — больше не требуются.

В этой статье я расскажу как сделать хлебные крошки на сайте с помощь HTML и CSS  в стиле flat. Так же можете посмотреть интересные flat шаблоны сайтов, может что-нибудь пригодиться. Я недавно делал подборку.

В конце мы получим вот такой результат:

Ранее, для того чтобы сделать прозрачную стрелки между двумя блоками использовалась прозрачная картинка на заднем фоне. Теперь данная проблема может быть решена используя только CSS.

<div> 
    <ul>
        <li><a href="#">Breadcrumb</a></li> 
    </ul>
</div>

Для начала создадим маркированный список — <ul>, в котором будут <li> элементы. Хлебная крошка будет добавляться с помощью добавления нового <li>.

Теперь напишем CSS, чтобы выглядело как тут:

#crumbs ul li a {
  display: block;
  float: left;
  height: 50px;
  background: #3498db;
  text-align: center;
  padding: 30px 40px 0 40px;
  position: relative;
  margin: 0 10px 0 0;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
}

Данные стили добавляют:

1. вид для ссылки в виде блока и синий цвет
2. центрируют текст и делаем его белым
3. ровный padding , чтобы блок отображался корректно по вертикали
4. сбрасывает иные стили для ссылок с text-decoration: none 

Внимание: position: relative добавлен для того, чтобы позже сдерживать все внутренние блоки с position: absolute.

#crumbs ul li a:after {
  content: "";
  border-top: 40px solid red;
  border-bottom: 40px solid red;
  border-left: 40px solid blue;
  position: absolute;
  right: -40px;
  top: 0;
}

Для создания стрелок мы будем использовать свойство :after, которое позволяет создавать дополнительный элемент после родителя. Добавляем ему position: absolute — для этого мы и делали positive: relative для ссылок <a>, чтобы удержать absolute свойство внутри ссылки и манипулировать им как нам хочется.

Вид стрелки будет сделан с помощью использования border’ов. В примере специально использован красный цвет, но чтобы придать вид треугольника будет использоваться transparent. Далее border будет пододвинут на месте с использование position: absolute.

Меняем red в border на transparent, чтобы создать эффект прозрачности.

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

#crumbs ul li a:before {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #d4f2ff;
  position: absolute;
  left: 0;
  top: 0;
}

Используя тот же принцип как и в третьем этапе — можно создать прозрачный треугольник позади блока. Цвет border должен быть поставлен как и задний цвет сайта, чтобы создавался эффект прозрачности.

padding: 30px 40px 0 80px;

Добавляя новые <li> увеличивают глубину хлебной крошки.

<div>
    <ul>
        <li><a href="#1">Один</a></li>
        <li><a href="#2">Два</a></li>
        <li><a href="#3">Три</a></li>
        <li><a href="#4">Четыре</a></li>
        <li><a href="#5">Пять</a></li>
    </ul>
</div>

Чтобы создать эффект закругления для первого и последнего элемента в хлебной крошки мы будем использовать :first-child и :last-child. 

#crumbs ul li:first-child a {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

#crumbs ul li:first-child a:before {
  display: none;
}

#crumbs ul li:last-child a {
  padding-right: 80px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#crumbs ul li:last-child a:after {
  display: none;
}

После чего нужно сделать выделения ссылки при наведении на нее. Цвет выделения можно выбрать по вашему вкусы — как пожелаете.

#crumbs ul li a:hover {
  background: #fa5ba5;
}

#crumbs ul li a:hover:after {
  border-left-color: #fa5ba5;
}

Так же не забудьте добавить border-radius при наведении на первый и последний элемент в хлебной крошке.

Вот что у нас получилось: https://jsfiddle.net/AlexanderT/bmuwLfqr/

На этом все. Если у вас есть какие-то вопросы — пишите комментарии и поделитесь статьей, если вам понравилось!

Как сделать хлебные крошки на сайте с помощью CSS от bologer

10 бесплатных сниппетов навигационных цепочек для веб-проектов

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

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

Навигационная панель создана с использованием чистого CSS и бесплатных иконок от Font Awesome.

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

Плоский дизайн все еще актуален. Если вы создаете сайт с использованием однородных цветов, тогда стоит использовать этот плоский навигационный дизайн, созданный на CSS.

Стрелки созданы с использованием CSS и Sass, что облегчает редактирование. Вы можете быстро сменить фон или цвет при наведении, изменив одну переменную Sass.

Данная навигационная панель использует библиотеку Bootstrap, которая также включает в себя иконки Font Awesome.

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

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

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

Эта навигационная панель служит образцом реализации данного эффекта. В ней используется градиент для создания иллюзии глубины на странице.

В этой панели хлебных крошек применяется анимация, работающая на CSS.

Каждый элемент цепочки панели использует иконку из библиотеки Font Awesome. Эти иконки легко масштабируются и создают структуру всей навигационной цепочки.

При наведении мышки вы получаете более подробную информацию на расширяющихся ярлыках.

Дизайн этой навигации довольно простой и лаконичный: с цифрами и эффектами при наведении мыши. Каждая стрелка выполнена на чистом CSS, а элементы навигационной цепочки идеально сочетаются друг с другом.

Большинство стрелок в навигационных цепочках направлены слева направо. Но в этой у стрелок обратное направление.

Обратите внимание, как подсвечен последний элемент цепочки. Благодаря этому эффекту пользователь видит, что это последняя позиция.

В этом решении можно найти пару хороших примеров с темной и светлой темой оформления. Мне также нравится форма панели и эффект теней, который заметно выделяется на более светлом заднем фоне.

Панель представляет собой простые ссылки с четкими разделителями между ними. Это отличный пример простого дизайна. В нем вы сможете изменить разделители исходя из вашего дизайна.

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

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

Дайте знать, что вы думаете по этой теме в комментариях. Мы очень благодарим вас за ваши комментарии, дизлайки, отклики, лайки, подписки!

Данная публикация является переводом статьи «10 Free Breadcrumb CSS Snippets For Web Projects» , подготовленная редакцией проекта.

Все, что вам нужно знать о панировочных сухарях

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

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

Важность панировочных сухарей

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

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

Самый простой способ добавить хлебные крошки на ваш сайт — использовать тему, предлагающую эту функцию по умолчанию. Системы управления контентом, такие как автономный WordPress, предлагают плагины для вставки настраиваемой строки навигации над заголовком статьи. Если ваш конструктор сайтов не предлагает такую ​​функцию, вам необходимо добавить ее вручную на каждую страницу с помощью тега привязки HTML. Например, инструменты для создания сайтов, такие как Weebly, не предлагают темы с хлебными крошками по умолчанию. Следовательно, вам нужно добавить его на каждую страницу отдельно с помощью собственного HTML / CSS.

Примеры панировочных сухарей

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

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

Панировочные сухари Yoast SEO

Навигационная цепочка Yoast SEO будет простой текстовой, и вы можете добавить поле и тень, используя приведенный ниже CSS:

#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px;
font-size: 16px;
}

Пользовательские хлебные крошки CSS

Вы можете добавить собственные хлебные крошки CSS, особенно если на вашем сайте меньше страниц. Ниже представлены горизонтальные хлебные крошки CSS, которые можно добавить на свой сайт. Ознакомьтесь с нашей статьей о том, как добавить эти хлебные крошки на свой сайт Weebly.

CSS Breadcrumb Style 1

CSS Breadcrumb Style 2

CSS Breadcrumb Style 3

CSS Breadcrumb Style 4

CSS Breadcrumb Style 5

Бонусный стиль CSS Breadcrumb 6

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

0

Навигация по записям

Похожие записи

Красивые хлебные крошки «breadcrumbs» на CSS3

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


 

#crumbs ul li a {
дисплей: блок;
плыть налево;
высота: 50 пикселей;
фон: # 3498db;
выравнивание текста: центр;
отступ: 30px 40px 0 40px;
положение: относительное;
маржа: 0 10px 0 0;

размер шрифта: 20 пикселей;
текстовое оформление: нет;
цвет: #fff;
}
 

#crumbs ul li a: after {
содержание: "";
border-top: сплошной красный 40 пикселей;
нижняя граница: сплошной красный 40 пикселей;
border-left: сплошной синий цвет 40 пикселей;
позиция: абсолютная; вправо: -40 пикселей; верх: 0;
}
 

border-top: сплошная прозрачная 40 пикселей;
нижняя граница: сплошная прозрачная 40 пикселей;
граница слева: 40px solid # 3498db;
 

#crumbs ul li a: before {
содержание: "";
border-top: сплошная прозрачная 40 пикселей;
нижняя граница: сплошная прозрачная 40 пикселей;
граница слева: сплошная 40 пикселей # d4f2ff;
позиция: абсолютная; слева: 0; верх: 0;
}
 

отступ: 30 пикселей 40 пикселей 0 80 пикселей;
 

  Один  
  Два  
  Три  
  Четыре  
  Пять  

 

#crumbs ul li: first-child a {
граница-верх-левый-радиус: 10 пикселей; граница-нижний-левый-радиус: 10 пикселей;
}
#crumbs ul li: first-child a: before {
дисплей: нет;
}

#crumbs ul li: last-child a {
отступ справа: 80 пикселей;
граница-верх-правый-радиус: 10 пикселей; граница-нижний-правый-радиус: 10 пикселей;
}
#crumbs ul li: last-child a: after {
дисплей: нет;
}
 

#crumbs ul li a: hover {
фон: # fa5ba5;
}
#crumbs ul li a: hover: after {
цвет границы слева: # fa5ba5;
}