Bootstrap Breadcrumb (хлебные крошки)

В постоянно расширяющемся цифровом мире эффективная навигация имеет первостепенное значение. Breadcrumbs (хлебные крошки) являются элементом юзабилити - это отличный способ улучшить навигацию на вашем веб-сайте. В этой документации - уроке подробно рассмотрим компонент хлебных крошек в Bootstrap 5, изучив его функциональные возможности, варианты стилизации и лучшие практики.

Что такое хлебные крошки?

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

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

Для создания базовых хлебных крошек используйте упорядоченный или неупорядоченный список с элементами списка, являющимися ссылками. Примените класс .breadcrumb к элементу <ol> или <ul>. Bootstrap обрабатывает остальное, добавляя разделители и стилизуя элементы списка для достижения классического эффекта хлебных крошек.

Пример:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Главная</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Главная</a></li>
    <li class="breadcrumb-item active" aria-current="page">Библиотека</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Главная</a></li>
    <li class="breadcrumb-item"><a href="#">Библиотека</a></li>
    <li class="breadcrumb-item active" aria-current="page">Данные</li>
  </ol>
</nav>

Результат:

Настройка хлебных крошек

Замена разделителей

По умолчанию Bootstrap использует разделители, создаваемые с помощью CSS (через ::before и content), чтобы разделять элементы хлебных крошек. Вы можете настроить символ разделителя, изменяя локальное пользовательское свойство CSS --bs-breadcrumb-divider или используя переменные Sass, такие как $breadcrumb-divider. Например:

$breadcrumb-divider: quote(">");

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Главная</a></li>
    <li class="breadcrumb-item active" aria-current="page">Библиотека</li>
  </ol>
</nav>

Результат:

Также в качестве разделителя можно использовать SVG-иконку:

$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

Пример:

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Главная</a></li>
    <li class="breadcrumb-item active" aria-current="page">Библиотека</li>
  </ol>
</nav>

Результат:

Для встроенного SVG требуются правильно экранированные символы. Некоторые зарезервированные символы, такие как <, > и #, должны быть закодированы в URL или экранированы. Мы делаем это с $breadcrumb-divider переменной, используя нашу escape-svg() функцию Sass. При настройке переменной CSS вы должны справиться с этим самостоятельно. Прочитайте пояснения Кевина Вебера по CodePen для получения дополнительной информации.

Разделитель может быть удален путем установки $breadcrumb-divider на none:

$breadcrumb-divider: none;

Аспекты доступности

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

Дополнительные сведения: Практика разработки WAI-ARIA» для шаблона навигации.

Как использовать хлебные крошки на своем сайте?

Хлебные крошки - это отличный способ улучшить навигацию на вашем веб-сайте. Вот как вы можете использовать их:

Добавьте HTML-код: Вставьте код хлебных крошек в нужное место на вашей странице. В Bootstrap 5 это можно сделать следующим образом:
```
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Главная</a></li>
    <li class="breadcrumb-item"><a href="#">Категория</a></li>
    <li class="breadcrumb-item active" aria-current="page">Текущая страница</li>
  </ol>
</nav>
```
Замените текст ссылок на свои собственные страницы.
Настройте стили: используйте CSS, чтобы стилизовать хлебные крошки в соответствии с дизайном вашего сайта. Вы можете изменить цвет, шрифт, размер и другие аспекты.
Подумайте об доступности: Убедитесь, что ваши хлебные крошки доступны для пользователей с ограниченными возможностями. Используйте семантические элементы, добавьте атрибуты aria-label и aria-current, чтобы обеспечить правильное восприятие.
Используйте их в контексте: Хлебные крошки особенно полезны на страницах с глубокой иерархией, таких как каталоги товаров, блоги или веб-приложения.

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

Заключение

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

На этой странице