SSB-C - Единый стандарт для хлебных крошек

Определения

Стандарт SSB-C определяет требования к семантике, доступности и логике работы хлебных крошек.

Микроразметка Schema.org - использование атрибутов itemscope, itemtype и itemprop для корректного отображения хлебных крошек в результатах поиска (Rich Snippets).

Структура HTML - логическая последовательность элементов: <nav> → <ol> → <li> → <a> (кроме последнего элемента, который представляет текущую страницу).

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

Стилизация текста - элементы списка должны иметь базовые стили, предотвращающие перенос текста (white-space: nowrap) и наследуемые ссылками.

Горизонтальный скролл - для мобильных устройств контейнер <nav> должен позволять горизонтальный скролл при переполнении содержимого (overflow-x: auto).

Структура и Семантика

Хлебные крошки должны использовать семантически корректные HTML-теги:

• <nav> для обозначения блока навигации;
• <ol> для упорядоченного списка;
• <li> для каждого элемента хлебной крошки.

Пример HTML (с классами по БЭМ):

<nav class="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a href="/" class="breadcrumbs__link">Главная</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="/category" class="breadcrumbs__link">Категория</a>
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--current">
      Название текущей страницы
    </li>
  </ol>
</nav>

Доступность

Последний элемент списка обозначает текущую страницу:

• Он не должен быть ссылкой;
• Для улучшения доступности следует добавить aria-current="page".

Пример HTML:

<li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">
  Название текущей страницы
</li>

Интерактивность и визуальный отклик

Стилизация текста и ссылок:

• Элементы <li> содержат базовые стили, которые наследуются ссылками (<a>);
• Для предотвращения переноса текста используется white-space: nowrap.

Пример CSS:

.breadcrumbs__item {
  font-size: 14px;
  color: #6c757d;
  white-space: nowrap;
}

.breadcrumbs__link {
  color: #007bff;
  text-decoration: none;
}

.breadcrumbs__item--current {
  font-weight: bold;
  color: #343a40;
}

Горизонтальный скролл для мобильных устройств:

.breadcrumbs {
  overflow-x: auto;
  overflow-y: hidden;
}

.breadcrumbs__list {
  display: flex;
}

Микроразметка Schema.org:

<nav class="breadcrumbs">
  <ol class="breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">Главная</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/category">
        <span itemprop="name">Категория</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
      <span itemprop="name">Название текущей страницы</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>