Bootstrap предлагает класс .breadcrumb, который стилизует список в виде хлебных крошек.
Bootstrap добавляет к списку разделители (с помощью ::before и content), а также display: inline-block к элементу <li> — в результате получается эффект «хлебных крошек».
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<nav aria-label="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Главная</a></li>
<li class="breadcrumb-item"><a href="#">Фрукты</a></li>
<li class="breadcrumb-item active">Груши</li>
</ul>
</nav>
Создание хлебных крошек
Для создания хлебных крошек:
- Хорошей идеей будет поместить хлебные крошки в элемент <nav> с aria-label="breadcrumb".
- Добавьте класс .breadcrumb к элементу <ul>, который отображает хлебные крошки.
- Добавьте класс .breadcrumb-item к каждому элементу <li> внутри хлебных крошек.
- Также добавьте class="active" к элементу <li>, который показывает текущую страницу или раздел (страницу, на которой находится пользователь) — это почти всегда будет последний пункт.
Изменение разделителя
Bootstrap автоматически добавляет разделитель в хлебные крошки. Вы можете изменить разделитель с помощью пользовательского свойства --bs-breadcrumb-divider:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Главная</a></li>
<li class="breadcrumb-item"><a href="#">Фрукты</a></li>
<li class="breadcrumb-item active">Груши</li>
</ul>
</nav>
Разделитель также можно поменять с помощью Sass-переменной $breadcrumb-divider или перевернуть с помощью $breadcrumb-divider-flipped для текста, идущего справа налево.
Хлебные крошки без списка
Хлебные крошки не обязательно должны быть в виде списка. При необходимости вы можете использовать их в таком виде:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<nav class="breadcrumb" aria-label="breadcrumb">
<a class="breadcrumb-item" href="#">Главная</a>
<a class="breadcrumb-item" href="#">Фрукты</a>
<span class="breadcrumb-item active">Груши</span>
</nav>