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

Описание компонента Breadcrumbs

Назначение компонента Breadcrumbs:
Компонент Breadcrumbs (хлебные крошки) используется для навигации по иерархии страниц или разделов на сайте. Он показывает пользователю текущее местоположение и позволяет быстро вернуться на предыдущие уровни. Breadcrumbs улучшают UX, делая навигацию более интуитивной и удобной.

HTML-структура:

Пример использования:

      
        <ul class="sf-breadcrumb">
          <li class="sf-breadcrumb-item">
            <i class="color-primary sf-icon sf-icon-light sf-breadcrumb--primary-color">home</i>  
          </li>
          <li class="sf-breadcrumb-item text-1/2 sf-breadcrumb--primary-color">
            <a href="#" class="text-1/2">Главная</a>
            <i class="sf-icon sf-icon-light sf-breadcrumb--primary-color">chevron_right</i>
          </li>
          <li class="sf-breadcrumb-item">
            <a href="#" class="text-1/2">Главная</a>
            <i class="sf-icon sf-icon-light">chevron_right</i>
          </li>
          <li class="sf-breadcrumb-item" aria-current="page">
            <a href="#" class="text-1/2">...</a>
            <i class="sf-icon sf-icon-light sf-breadcrumb--primary-color">chevron_right</i>
          </li>
          <li class="sf-breadcrumb-item sf-breadcrumb--primary-color" aria-current="page">
            <a href="#" class="text-1/2">Главная</a>
          </li>
        </ul>

Основные классы:

.sf-breadcrumb: Базовый класс для контейнера Breadcrumbs.
.sf-breadcrumb-item: Класс для каждого элемента Breadcrumbs.
.sf-breadcrumb--primary-color: Класс для изменения цвета текста и иконок на основной цвет.

Переменные CSS:

Название переменной	Значение по умолчанию	Описание
`--sf-breadcrumb--padding-1`	`var(--sf-b0)`	Внутренний отступ сверху и снизу для контейнера Breadcrumbs
`--sf-breadcrumb--color`	`var(--sf-on-surface-variant)`	Цвет текста по умолчанию для ссылок в Breadcrumbs
`--sf-breadcrumb-i--padding`	`var(--sf-a3)`	Отступ для иконок внутри элементов Breadcrumbs
`--sf-breadcrumb-i--padding`	`var(--sf-a3)`	Отступ для иконок внутри элементов Breadcrumbs
`--sf-breadcrumb-i--font-size`	`var(--sf-c0)`	Внутренний отступ сверху и снизу для контейнера Breadcrumbs
`--sf-breadcrumb-i--font-size`	`var(--sf-c0)`	Размер иконок внутри элементов Breadcrumbs

Пояснение:

--sf-breadcrumb--padding-1: Внутренний отступ сверху и снизу для контейнера Breadcrumbs.
--sf-breadcrumb--padding-2: Внутренний отступ слева и справа для контейнера Breadcrumbs.
--sf-breadcrumb-i--padding: Отступ для иконок внутри элементов Breadcrumbs.
--sf-breadcrumb-i--font-size: Размер иконок внутри элементов Breadcrumbs.

Состояния компонента:

Обычное состояние: Элементы Breadcrumbs отображаются с текстом и иконками.
Активное состояние, определяемое псевдо-классом :active: Текущий элемент выделяется.
Состояние при наведении, определяемое псевдо-классом :hover: Текущий элемент меняет цвет на --sf-primary-hover.
Состояние при фокусе :focus: Добавляет тень (box-shadow)

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью