Breadcrumb

A breadcrumb displays a hierarchical series of links to help orient a user. 

Default

The breadcrumb shows the location of a page, in relation to its parent pages. It allows users to navigate back through these pages with ease. 

For mobile resolutions (under 768px) the breadcrumb shows a link to the immediate parent and current page only. 

<nav aria-label="Breadcrumb" class="nsw-breadcrumb">
  <ol class="nsw-breadcrumb__list">
      <li class="nsw-breadcrumb__item">
        <a href="#" class="nsw-breadcrumb__link">Home</a>
      </li>
      <li class="nsw-breadcrumb__item">
        <a href="#" class="nsw-breadcrumb__link">News and Events</a>
      </li>
      <li class="nsw-breadcrumb__item">
        <a href="#" class="nsw-breadcrumb__link">News</a>
      </li>
      <li class="nsw-breadcrumb__item">
        <a href="#" class="nsw-breadcrumb__link nsw-breadcrumb--current" aria-current="page">Download the digital drivers license</a>
      </li>
  </ol>
</nav>

 

Copy

Breadcrumbs are a complementary way to navigate back through the site architecture.  

They give users context and a progressive sense of place. They show the current page location in the context of its parent pages, starting with the home link. This helps the user to understand the site structure and facilitates discovery if they’ve landed on the page using search. 

Parent pages are visually treated to be easily understood as links. The label of the user’s current page is not a link. Chevrons are used between the labels to suggest a visual hierarchy. 

Display in the top left of the main content area above the page title. 

Ensure you use the same labels and casing as the main IA. 

Use for large deep websites. 

Don’t use for progressive flows such as wizards.