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

  alexei 19/04/2022 - 09:18

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


Как сделать навигацию "хлебные крошки"

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


Шаг 1) Добавляем HTML:


<ul class="breadcrumb">
  <li><a href="#">На главную</a></li>
  <li><a href="#">Картинки</a></li>
  <li><a href="#">Лето</a></li>
  <li>Италия</li>
</ul>

Шаг 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;
}