Breadcrumbs

Breadcrumbs are a navigation element typically located at the top of a page. They show a user their current location and provide a means to navigate back or to related content.

The first breadcrumb link should always be Home. As breadcrumbs are secondary content, they use the secondary font size. Please note the use of schema tags.

See Breadcrumbs at Sears Patterns Library for more information.

<ul class="has-breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb home">
    <a itemprop="item" href="#">
    <span itemprop="name">Home</span>
    <meta itemprop="position" content="1" />
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb">
    <a itemprop="item" href="#">
    <span itemprop="name">Category 1</span>
    <meta itemprop="position" content="2" />
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb">
    <a itemprop="item" href="#">
    <span itemprop="name">Category 2</span>
    <meta itemprop="position" content="3" />
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb">
    <span itemprop="name">Current Category</span>
    <meta itemprop="position" content="4" />
  </li>
</ul>