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

HTML

<nav class="breadcrumbs" aria-label="Хлебные крошки">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">Главная</a>
    </li>
    <span class="breadcrumbs__separator">/</span>
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">Компания</a>
    </li>
    <span class="breadcrumbs__separator">/</span>
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">Блог</a>
    </li>
    <span class="breadcrumbs__separator">/</span>
    <li class="breadcrumbs__item breadcrumbs__item--current">Название статьи</li>
  </ol>
</nav>

CSS

.breadcrumbs__list {
  font-size: 16px;
  list-style: none;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

.breadcrumbs__item {
  display: inline;
  color: #000;
}

.breadcrumbs__link {
  color: #828a99;
  text-decoration: none;
}

.breadcrumbs__link:hover {
  color: #50545d;
}

.breadcrumbs__separator {
  display: inline;
  margin: 0 10px;
  color: #828a99;
}

Хлебные крошки на HTML и CSS — готовый сниппет кода для верстки

Готовые примеры хлебных крошек на чистом HTML и CSS. Лёгкие в интеграции, адаптивные и полностью настраиваемые под дизайн любого сайта. Подходят для блогов, интернет-магазинов, корпоративных порталов и лендингов. Все решения можно скопировать, адаптировать и использовать без подключения сторонних библиотек.

Особенности:

Разные варианты отображения: с разделителями, стрелками, иконками
Простая адаптация под цветовую схему проекта
Совместимость со всеми современными браузерами
Адаптивная верстка для мобильных и десктопов
Чистый и семантический HTML + современный CSS
Поддержка микроразметки для SEO

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