Breadcrumbs

Used to help members find where they are on the website

How we design them

  • Use breadcrumbs on pages that are three or more levels deep, so the members know where they are and how to go back
  • Breadcrumbs should be located underneath the main nav and above the page title
  • We like to make the first breadcrumb bold, this makes it easier for members to identify to the homepage of a section
  • On small screens, the current level disappears to prevent the breadcrumb wrapping on to multiple lines
  • On small screens, when there are more than three levels, only show the first level and the level before the current level to avoid wrapping into multiple lines. All middle levels are replaced by a single ellipsis

Why we do this

Accessibilty

  • Wrap in a nav element with the aria-label="breadcrumb" attribute
  • Add aria-current="page" to the last link to identify that it’s the current page
  • Retain the a and href for the current page so that screen readers / members navigating by links are able to discover the currently active link

How they look

View demo Open in new window
Open in new window
320 x 568
View code 
    <nav aria-label="breadcrumb">
  <ol class="gg-c-breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="gg-c-breadcrumbs__link" href="/section-homepage" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/section-homepage">
        <span itemprop="name">Root page</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="gg-c-breadcrumbs__link" href="/level-2" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/level-2">
        <span itemprop="name">Level 2</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >
      <a class="gg-c-breadcrumbs__link" href="/level-2/current-page" aria-current="page" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/level-2/current-page">
        <span itemprop="name">Current page</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

Longer breadcrumb

View demo Open in new window
Open in new window
320 x 568
View code 
    <nav aria-label="breadcrumb">
  <ol class="gg-c-breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="gg-c-breadcrumbs__link" href="/section-homepage" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/section-homepage">
        <span itemprop="name">Root page</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="gg-c-breadcrumbs__link" href="/level-2" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/level-2">
        <span itemprop="name">Level 2</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="gg-c-breadcrumbs__link" href="/level-2/level-3" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/level-2/level-3">
        <span itemprop="name">Level 3</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="gg-c-breadcrumbs__link" href="/level-2/level-3/level-4" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/level-2/level-3/level-4">
        <span itemprop="name">Level 4</span>
      </a>
      <meta itemprop="position" content="4" />
    </li>
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >
      <a class="gg-c-breadcrumbs__link" href="/level-2/level-3/level-4/current-page" aria-current="page" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/level-2/level-3/level-4/current-page">
        <span itemprop="name">Current page</span>
      </a>
      <meta itemprop="position" content="5" />
    </li>
  </ol>
</nav>
View demo Open in new window
Open in new window
320 x 568
View code 
    <nav aria-label="breadcrumb">
  <ol class="gg-c-breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="gg-c-breadcrumbs__link" href="/section-homepage" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/section-homepage">
        <span itemprop="name">Root page</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li class="gg-c-breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >
      <a class="gg-c-breadcrumbs__link" href="/section-homepage/current-page" aria-current="page" itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/section-homepage/current-page">
        <span itemprop="name">Current page</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
  </ol>
</nav>