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

29.10.2025

Влад Мержевич

Хлебные крошки — это разновидность навигации, которая помогает посетителям понять, где они находятся на сайте и быстро перемещаться по иерархии веб-страниц. Обычно хлебные крошки отображаются в виде цепочки ссылок, разделённых между собой специальными символами (например: «>», «/» или «→»).

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

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

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

Разметка хлебных крошек обычно делается с помощью списков <ul> или <ol>, каждая ссылка вставляется внутрь пункта списка <li>. Для последнего пункта списка ссылка не нужна, поэтому вместо элемента <a> используем <span>.

<ol>
  <li><a href="/">Главная</a></li>
  <li><a href="/catalog/">Каталог</a></li>
  <li><a href="/catalog/electronics/">Электроника</a></li>
  <li><span>Смартфоны</span></li>
</ol>

Поскольку хлебные крошки служат формой навигации, их рекомендуется поместить внутрь элемента <nav>, снабдив его атрибутом aria-label с текстовой подсказкой. Она помогает слабовидящим людям, использующих скринридер для озвучивания текста веб-страницы, понять что это за элемент. Для обозначения текущей веб-страницы добавляем к последнему <li> атрибут aria-current со значением page. И последнее — добавим класс breadcrumb к элементу <ol>, чтобы целенаправленно применять стиль только к этому элементу.

<nav aria-label="Хлебные крошки">
  <ol class="breadcrumb">
    <li><a href="/">Главная</a></li>
    <li><a href="/catalog/">Каталог</a></li>
    <li><a href="/catalog/electronics/">Электроника</a></li>
    <li aria-current="page"><span>Смартфоны</span></li>
  </ol>
</nav>

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

.breadcrumb {
  margin: 0; padding: 0; /* Обнуляем отступы и поля */
  list-style: none; /* Убираем маркеры и нумерацию */
}

Затем превращаем список в горизонтальный, добавив к классу breadcrumb свойство display со значением flex или inline-flex. Разница между значениями следующая:

flex — делает хлебные крошки на всю ширину области;
inline-flex — ширина хлебных крошек соответствует их содержимому.

На рис. 2 показаны хлебные крошки при разных значениях свойства display.

а. display: flex

б. display: inline-flex

Рис. 2. Значение display

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

По умолчанию флекс-элементы не переносятся на другую строку, поэтому это поведение следует исправить через свойство flex-wrap со значением wrap.

.breadcrumb {
  flex-wrap: wrap;
}

Разделители между ссылками также устанавливаются через стили, что удобно, поскольку не требуется каким-либо образом менять исходный код HTML. Символ разделителя добавляется с помощью свойства content и псевдоэлемента ::after.

.breadcrumb > li::after {
  content: '→';
  color: orange;
}

Здесь мы используем стрелку и делаем её оранжевой через свойство color. После последнего пункта стрелка не нужна и она убирается комбинацией свойства content со значением none и псевдокласса :last-child, он применяет стиль только к последнему пункту списка.

.breadcrumb > li:last-child::after {
  content: none;
}

Окончательный код приведён в примере 1.

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

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Хлебные крошки</title>
  <style>
   body {
    background-color: #f3f3f3; /* Серый цвет фона */
   }
   .breadcrumb {
    margin: 0; padding: 0; /* Обнуляем отступы и поля */
    list-style: none; /* Убираем маркеры и нумерацию */
    background-color: #fff; /* Белый цвет фона */
    font-family: Arial, Helvetica, sans-serif; /* Шрифт */
    padding: 1rem; /* Расстояние от текста до края */
    border-radius: 5px; /* Радиус скругления */
    display: flex; /* Выстраиваем список по горизонтали */
    flex-wrap: wrap; /* Текст переносится на другую строку */
    margin-top: 2rem; /* Расстояние сверху */
   }
   .breadcrumb > li > a,
   .breadcrumb > li > a:visited {
    color: #2c2c2c; /* Серый цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание */
   }
   .breadcrumb > li > a:hover {
    color: #1335c5; /* Цвет ссылок при наведении */
   }
   .breadcrumb > li::after {
    content: '→';  /* Символ разделителя */
    color: orange; /* Цвет символа */
    padding: 0 1rem; /* Расстояние слева и справа */
   }
   .breadcrumb > li:last-child::after {
    content: none; /* Убираем разделитель */
   }
   .breadcrumb > span {
    color: #0e0e0e; /* Цвет текста */
    font-weight: bold; /* Жирный шрифт */
   }
  </style>
 </head>
 <body>
  <nav aria-label="Хлебные крошки">
   <ol class="breadcrumb">
    <li><a href="/">Главная</a></li>
    <li><a href="/catalog/">Каталог</a></li>
    <li><a href="/catalog/electronics/">Электроника</a></li>
    <li aria-current="page"><span>Смартфоны</span></li>
   </ol>
  </nav>
 </body>
</html>

Результат данного примера показан на рис. 2a.

Итоги

Хлебные крошки — это навигационный элемент, отображающий путь от главной страницы сайта до текущей, помогающий пользователю ориентироваться и быстро перемещаться по иерархии веб-страниц.
Хлебные крошки обычно создаются с помощью маркированного списка <ul> или нумерованного списка <ol>. С помощью свойства display со значением flex или inline-flex список превращается в горизонтальный.
Внешний вид ссылок задаётся через стили, там же добавляется и символ разделителя между пунктами списка.

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

Итоги

Популярные материалы