Toggle navigation

Blocks

Breadcrumbs

A breadcrumb enables users to quickly see their location within a path of navigation.

<!-- First level example -->
<div class="breadcrumb-wrapper">
    <nav class="container" aria-label="Breadcrumb">
        <ol class="breadcrumb">
            <span class="sr-only">You are here: </span>
            <li><a href="https://www.brookes.ac.uk/">Home</a></li>
            <li class="active" aria-current="page">Studying at Brookes</li>
        </ol>
    </nav>
</div>
<!-- Second level example -->
<div class="breadcrumb-wrapper">
    <nav class="container" aria-label="Breadcrumb">
        <ol class="breadcrumb">
            <span class="sr-only">You are here: </span>
            <li><a href="https://www.brookes.ac.uk/">Home</a></li>
            <li><a href="https://www.brookes.ac.uk/Studying-at-Brookes/">Studying at Brookes</a></li>
            <li class="active" aria-current="page">Learning</li> 
        </ol>
    </nav>
</div>
<!-- Third level example -->
<div class="breadcrumb-wrapper">
    <nav class="container" aria-label="Breadcrumb">
        <ol class="breadcrumb">
            <span class="sr-only">You are here: </span>
            <li><a href="https://www.brookes.ac.uk/">Home</a></li>
            <li><a href="https://www.brookes.ac.uk/Studying-at-Brookes/">Studying at Brookes</a></li>
            <li><a href="https://www.brookes.ac.uk/Studying-at-Brookes/Learning/">Learning</a></li>
            <li class="active" aria-current="page">Study support</li> 
        </ol>
    </nav>
</div>
  • Used on every page except the homepage. The breadcrumb should represent where the user is within the site structure, not the journey they took through the site.
  • Breadcrumbs display the current path as links separated by a slash to indicate each level.
  • The navigation root is the first element, the current location is the last element
  • The current location is not clickable and the list item should have the class active.
  • Clicking on a link takes you to that page.
  • Each breadcrumb label should match the corresponding page title.

The link to the current page has aria-current set to page. If the element representing the current page is not a link, aria-current is optional.

View the WAI-ARIA practices documentation for more information.

Top of page

Changelog

Added Updates Current version Accessibility Status
10 Aug 2016 N/A 1.0.0 Accessible Current

Top of page