SSB-C - Single standard for breadcrumbs

Definitions

The SSB-C standard defines requirements for the semantics, accessibility, and logic of breadcrumbs.

Schema.org microdata — the use of the itemscope, itemtype, and itemprop attributes to correctly display breadcrumbs in search results (Rich Snippets).

HTML Structure — the logical sequence of elements: <nav> → <ol> → <li> → <a> (except for the last element, which represents the current page).

Last element - the list element <li>, which denotes the current page and must not be a link; it is recommended to use aria-current="page".

Text styling - list items must have basic styles that prevent text wrapping (white-space: nowrap) and are inherited by links.

Horizontal scrolling - for mobile devices, the <nav> container must allow horizontal scrolling when content overflows (overflow-x: auto).

Structure and Semantics

Breadcrumbs must use semantically correct HTML tags:

• <nav> to denote the navigation block;
• <ol> for an ordered list;
• <li> for each breadcrumb item.

HTML example (with BEM classes):

<nav class="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a href="/" class="breadcrumbs__link">Home</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="/category" class="breadcrumbs__link">Category</a>
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--current">
      Current page title
    </li>
  </ol>
</nav>

Accessibility

The last item in the list indicates the current page:

• It should not be a link;
• To improve accessibility, add aria-current="page".

HTML example:

<li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">
  Current page title
</li>

Interactivity and Visual Feedback

Text and Link Styling:

• <li> elements contain basic styles that are inherited by links (<a>);
• white-space: nowrap is used to prevent text wrapping.

CSS Example:

.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;
}

Horizontal scrolling for mobile devices:

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

.breadcrumbs__list {
  display: flex;
}

Schema.org microdata:

<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">Home</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">Category</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">Current page title</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>