Как сделать хлебные крошки на сайте html

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

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

Рис. 1. Вид хлебных крошек

Серый текст показывает название текущего документа, а ссылки ведут на предыдущие документы, при этом первая ссылка, как правило, всегда указывает на главную страницу сайта.

с классом breadcrumb , элементы
формируют сами «крошки». Текущий пункт ссылкой не является и к нему добавляется класс active (пример 1).

Пример 1. Хлебные крошки

Автор: Влад Мержевич
Последнее изменение: 05.08.2023

• Установка Bootstrap
• Модульные сетки
• Адаптивный дизайн
• Стили
• Компоненты
  • Группа кнопок
  • Ниспадающее меню
  • Вкладки
  • Хлебные крошки
  • Нумерация страниц
  • Эскизы
  • Сообщения
  • Всплывающая подсказка

  Как сделать — Хлебные крошки

  Узнать, как создать навигацию по хлебным крошкам с помощью CSS.

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

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

  Создать хлебные крошки

  Шаг 1) Добавить HTML:

  Пример

  Шаг 2) Добавить CSS:

  Пример

  /* Стиль списка */
  ul.breadcrumb padding: 10px 16px;
  list-style: none;
  background-color: #eee;
  >

  /* Отображение элементов списка бок о бок */
  ul.breadcrumb li display: inline;
  font-size: 18px;
  >

  /* Добавить символ косой черты (/) перед/за каждым элементом списка */
  ul.breadcrumb li+li:before padding: 8px;
  color: black;
  content: «/\00a0»;
  >

  /* Добавить цвет для всех ссылок внутри списка */
  ul.breadcrumb li a color: #0275d8;
  text-decoration: none;
  >

  /* Добавить цвет на наведении курсора мыши */
  ul.breadcrumb li a:hover color: #01447e;
  text-decoration: underline;
  >

  Зайдите на наш учебник CSS Пагинация, чтобы узнать больше о пагинации.

  Мы только что запустили
  SchoolsW3 видео

  ВЫБОР ЦВЕТА

  

  курс сегодня!

  Сообщить об ошибке

  Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

  Ваше предложение:

  Спасибо Вам за то, что помогаете!

  Ваше сообщение было отправлено в SchoolsW3.

  ТОП Учебники

  ТОП Справочники

  ТОП Примеры

  Получить сертификат

  SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

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

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

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

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

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

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

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

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

  

  с классом breadcrumb . Далее в
  необходимо поместить нужное количество элементов
  1. с классом breadcrumb-item . Эти элементы будут определять навигационную цепочку до текущей страницы. После этого в
  2. необходимо поместить с атрибутом href и текстом.

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

  

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

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

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

  

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

  /* пример стилей */ .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; }

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

  

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

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

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

  Например: Главная страница — Основной раздел — Подраздел — Страница

  

  На сайте они повторяют меню, и, чаще всего, располагаются в верхней части страницы.

  Для чего нужны и какие задачи решают?

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

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

  При правильной настройке “хлебных крошек”, посетитель сможет сориентироваться, где находится и, при необходимости, вернуться в предыдущий раздел.

  Хлебные крошки имеют две функции:

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

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

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

  1. Улучшение юзабилити сайта.

  Использовать хлебные крошки можно для решения задач:

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

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

  с классом breadcrumb, элементы
  формируют «крошки». Текущий пункт ссылкой не является и к нему добавляется класс active.

  Если вы хотите настроить цепочку для плагина WordPress, то код будет другой. Разберем, как сделать хлебные крошки в woocommerce:

  1. Если нужно изменить название главной страницы. Например, на “Аренда вилл”.
  1. Для изменения разделителя:
  1. Изменение нескольких параметров:
  1. Изменение ссылки с главной страницы на любую другую:
  1. Удаление хлебных крошек:

  function jk_remove_wc_breadcrumbs() <
  remove_action(‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20, 0);
  >

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

  

  1. Линейные.Показывают полный путь от главной страницы до текущей.

  При сложной структуре навигационную цепочку лучше укоротить. Например, начать с раздела каталога.

  1. Динамические. Формируется в зависимости от пути пользователя. Чаще всего используется в интернет-магазинах, где один товар может находится в нескольких разделах.

  

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

  

  1. Система “назад”.Вместо цепочки показываются кнопки назад, вернуться на предыдущую страницу, назад в каталог и тд.Удобно для страниц, где есть функция поиска.

  

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

  

  1. Атрибутивная. Пользователь формирует свой путь на сайте на основе заданных фильтров.

  

  Как реализовать seo хлебные крошки?

  При создании навигационной цепочки нужно учитывать определенные правила:

  1. Использовать навигационную цепочку только там, где она нужна. Например, создавать хлебные крошки сайтам-одностраничникам нет необходимости.
  2. Не использовать хлебные крошки на главной странице. Это отрицательно отразится на ранжировании.
  3. Не стоит подгонять название разделов под ключевые фразы, только если соблюдена логика, иначе поисковые системы сочтут сайт спамным.
  4. При линейной навигации прописывать путь до самого конца.
  5. Размещать цепочку в хорошо видном для пользователя месте.
  6. Обозначить контент html — тегами. Для этого добавляется микроразметка, чтобы поисковые боты понимали, что и где находится на сайте.
  7. Проверить правильность создания хлебных крошек при помощи специальных сервисов: валидатора заметки в Яндекс.Вебмастер и проверки структурированных данных в Google.

  Настройка “хлебных крошек” происходит разными способами.

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

  Прописывается код, который добавляется в место будущего отображения хлебных крошек в HTML. Это самый простой код для настройки.

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

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

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

  • градиенты;
  • переходы;
  • стрелки.

  Файл style.css используется для улучшения внешнего вида. Добавляется после начального этапа настройки. Пример:

  /* Стиль списка */
  ul.breadcrumb <
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
  >

  /* Добавить символ косой черты (/) перед/за каждым элементом списка */
  ul.breadcrumb li+li:before <
  padding: 8px;
  color: black;
  content: «/\00a0»;
  >

  /* Добавить цвет для всех ссылок внутри списка */
  ul.breadcrumb li a <
  color: #0275d8;
  text-decoration: none;
  >

  /* Добавить цвет на наведении курсора мыши */
  ul.breadcrumb li a:hover <
  color: #01447e;
  text-decoration: underline;
  >

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

  Подключение модулей CMS (Joomla, Breadcrumb NavXT). BreadcrumbNavXT — добавляется код через файл single.php для хлебных крошек (все записи), файл page.php (для статических страниц), category.php (для всех рубрик) или в файл header.php (чтобы показать везде).Joomla — подключение осуществляется через раздел «Менеджер модулей» панели управления. В настройках модуля можно произвести настройку под себя, выбрав символ для разделителя крошек, указав название для главной и нюансы отображения навигационной цепочки.

  Настройка хлебных крошек для разных CMS

  CMS — это движок для вашего сайта. В этом разделе мы рассмотрим самые популярные системы: WordPress, Tilda, Bitrix. Самый быстрый способ создания — подключить плагин и добавить код в header.php. Тем не менее, разметка хлебных крошек будет отличаться. Это связано с тем, что у каждой системы свой код и свои требования.

  Хлебные крошки для Tilda

  

  Делается очень просто. На страницу добавляется блок ME605 из раздела «Меню». Его можно разместить под обложкой. В содержании пишутся названия пунктов и ставятся ссылки на соответствующие страницы. Блок можно копировать из одной страницы и вставлять в другую, добавляя по одному новому пункту навигационной цепочки. Хлебные крошки для тильды получаются быстро, выглядят стильно и удобно для пользователей.

  Хлебные крошки для Bitrix

  

  Использовать компонент bitrix:breadcrumb можно внутри других компонентов, например: bitrix:news или bitrix:catalog.

  Вызов компонента bitrix:breadcrumb

  IncludeComponent(«bitrix:breadcrumb», «», Array(«START_FROM» => «0», «PATH» => «», «SITE_ID» => «s1»)); ?>

  В шаблоне располагать placeholder, который при выполнении component_epilog.php будет заменяться на нужный нам контент. (в данном случаи на «хлебные-крошки»).

  Для реализации задачи потребуется создать класс, например ComponentHelper. В папке /bitrix/php_interface/ создадим папку /class/ в ней нужно создать файл ComponentHelper.php со следующим содержимым:

  #/bitrix/php_interface/classes/ComponentHelper.php
  namespace PHPInterface;

  /** * ComponentHelper * * */
  class ComponentHelper <
  private $component = null;
  private $lastPlIndex = 0;
  private $pull = array();

  public function __construct(\CBitrixComponent $component) <
  $this->component = $component;
  $this->component->SetResultCacheKeys(array(‘CACHED_TPL’, ‘CACHED_TPL_PULL’));
  ob_start();
  >

  public function deferredCall($callback, $args = array()) <
  $plName = $this->getNextPlaceholder();
  echo $plName;
  $this->pull[$plName] = array(‘callback’ => $callback, ‘args’ => $args);
  >

  public function saveCache() <
  $this->component->arResult[‘CACHED_TPL’] = @ob_get_contents();
  $this->component->arResult[‘CACHED_TPL_PULL’] = $this->pull; ob_get_clean();
  $this->component = null;
  >

  private function getNextPlaceholder() <
  return ‘##PLACEHOLDER_’.(++$this->lastPlIndex).’##’;
  >

  public static function handle(\CBitrixComponent $component) <
  $buf = &$component->arResult[‘CACHED_TPL’];

  foreach ($component->arResult[‘CACHED_TPL_PULL’] as $plName => $params) <
  list($prevPart, $nextPart) = explode($plName, $buf);
  echo $prevPart;
  call_user_func_array($params[‘callback’], $params[‘args’]);
  $buf = &$nextPart;
  >

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

  Строки необходимые добавить в файл init.php (располагается в /bitrix/php_interface/)

  // Подключаем созданный класс ComponentHelper.php
  require_once(dirname(__FILE__).’/classes/ComponentHelper.php’);

  // Функция отвечающая за вывод «хлебных-крошек» bitrix:breadcrumb
  function ShowNavChain($template = ‘.default’) <
  global $APPLICATION;
  $APPLICATION->IncludeComponent(«bitrix:breadcrumb», «», Array(«START_FROM» => «0», «PATH» => «», «SITE_ID» => «s1»);
  >

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

  // В необходимом месте вставки «хлебных-крошек»
  $helper = new PHPInterface\ComponentHelper($component);
  $helper->deferredCall(‘ShowNavChain’, array(‘.default’));

  // И в конце шаблона обязательно вызвать
  $helper->saveCache();

  В папке шаблона создаём файл component_epilog.php с содержимым:

  Хлебные крошки для WordPress

  

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

  Другой вариант — Breadcrumb NavXT — самый популярный плагин по хлебным крошкам в вордпресс. Содержит функции для легкой настройки отображения навигации. В нем есть:

  • встроенный виджет;
  • поддержка bbPress, BuddyPress и локализации;
  • возможность использования фильтров.

  Хлебные крошки для Opencart

  Есть несколько вариантов:

  

  1. Установить готовый модуль.
  2. Прописать код вручную. Для этого нужно:
  • зайти на FTP;
  • прописать нужную информацию. В примере приведены стандартные хлебные крошки опенкарт.
  • перейти по ссылке и проверить полученный результат.

  Микроразметка хлебных крошек

  Благодаря семантической разметке поисковые системы понимают, какую информацию предоставляет страница. Ее преимущества:

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

  Все это ведет к увеличению трафика и влияет на ранжирование.

  

  Микроразметка хлебных крошек shema.org — является самой удобной и востребованной. Разберем один из примеров:

  Расшифруем элементы, которые содержат хлебные крошки на Shema.org:

  • itemscope — показывает поисковому боту объект на странице;
  • itemtype — демонстрирует тип объекта;
  • meta itemprop=»position» content=»%number%» — всегда пишется в конце блока и определяет позицию элемента в навигационной цепочке.

  Хлебные крошки в веб-дизайне

  Дизайн хлебных крошек может быть разным. Стиль зависит от требования заказчика и особенностей отраслей. Есть несколько вариантов оформления:

  

  • в макете выделено специальное место для навигационной строки;
  • вместо ссылки «главная» используется домик или лого;
  • иконки добавлены в элементы навигационной цепочки;
  • создаётся список меток.

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

  Удалить хлебные крошки

  Иногда приходится удалять цепочку и сделать это возможно несколькими способами:

  1. С помощью CSS
  1. Отключить хлебные крошки с помощью тегов Woocommerce.
  • удалить с главной страницы, но оставить в категориях:
  • удалить идентификатор или пул:

  function remove_page_breadcrumbs() <
  if(is_page(‘YOUR_PAGE_ID_OR_SLUG’)) <
  remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20, 0);
  >
  >

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

  Автор: Наталья Гилёва-Живых

  Читать:
  Как сделать установочную флешку mac os yosemite