breadcrumbs

A semantic recommendation for marking up breadcrumbs.

The breadcrumbs component will give you the schema markup you need to output breadcrumb sitelinks in a Google search result. Note the “you are here” title on the last breadcrumb item. When modifying this component you should feel free to use any HTML that fits the structure and hierarchy of your project, while maintaining any of the schema-related HTML attributes (itemscope, itemtype, itemprop, etc.). The associated breadcrumb images are not required.

Examples

Usage

<nav role="navigation" class="breadcrumbs">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList" aria-label="breadcrumb navigation">

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemscope itemtype="https://schema.org/Thing" itemprop="item" href="#!">
        <!-- the actual display name of the breadcrumb -->
        <span itemprop="name">Books</span>
      </a>

      <!-- the content position should increment by 1 (starting at 1) -->
      <meta itemprop="position" content="1" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemscope itemtype="https://schema.org/Thing" itemprop="item" href="#!" aria-current="page">
        <!-- the actual display name of the breadcrumb -->
        <span itemprop="name">Subtopic or landing page</span>
      </a>
        <!-- the content position should increment by 1 (starting at 1) -->
        <meta itemprop="position" content="2" />
    </li>

  </ol>
</nav>

					
.breadcrumbs > ol {
  display: flex;
  list-style: none;
  margin: 0;
}

.breadcrumbs > ol li {
  margin-right: .5em;
}

.breadcrumbs > ol li + li:before {
  content: '>';
}

Resources