Breadcrumbs
Breadcrumbs provide secondary navigation to help users understand where they are in a website.
<section class="section has-background-primary breadcrumb-nav-wrapper">
<div class="container is-fullhd ">
<nav class="breadcrumb-nav" aria-label="breadcrumbs">
<ul>
<li><a class="has-text-grey-dark" href="https://www.brookes.ac.uk/">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Collections</a></li>
<li><a class="has-text-black" href="#" aria-current="page">Special Collections</a> </li>
</ul>
</nav>
</div>
</section>
<section class="section has-background-grey-lighter section-nav-wrapper">
<div class="container is-fullhd">
<ul class="section-nav-parent">
<li class="dropdown-parent">
<a class="dropdown-trigger is-hidden-tablet has-text-black dropdown-parent-link" href="#" aria-haspopup="true" aria-controls="dropdown-menu0">In this section <i class="fas fa-angle-down is-pulled-right m-top-10" aria-hidden="true"></i></a>
<div class="dropdown-parent-menu" id="dropdown-menu0" role="menu">
<ul class="section-nav">
<li>
<a class="has-text-black" href="#">Contact</a>
</li>
<li class="dropdown">
<a class="dropdown-trigger has-text-black" href="#" aria-haspopup="true" aria-controls="dropdown-menu1">Food and drink <i class="fas fa-angle-down" aria-hidden="true"></i></a>
<div class="dropdown-menu" id="dropdown-menu1" role="menu">
<ul class="dropdown-content">
<li><a href="#" class="dropdown-item"><strong>Food and drink</strong></a></li>
<li><a href="#" class="dropdown-item">Fuller Collection</a></li>
<li><a href="#" class="dropdown-item">Jane Grigson Collection</a></li>
<li><a href="#" class="dropdown-item">Ken Hom Library</a></li>
<li><a href="#" class="dropdown-item">Michael Jackson Collection</a></li>
<li><a href="#" class="dropdown-item">National Brewing Library</a></li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-trigger has-text-black" href="#" aria-haspopup="true" aria-controls="dropdown-menu2">Art and architecture <i class="fas fa-angle-down" aria-hidden="true"></i></a>
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
<ul class="dropdown-content">
<li><a href="#" class="dropdown-item"><strong>Art and architecture</strong></a></li>
<li><a href="#" class="dropdown-item">Artists' Books Collection</a></li>
<li><a href="#" class="dropdown-item">Ian Davis Disaster Management Collection</a></li>
<li><a href="#" class="dropdown-item">MOMA Oxford Collection</a></li>
<li><a href="#" class="dropdown-item">Oxfordshire Society of Architects Collection</a></li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-trigger has-text-black" href="#" aria-haspopup="true" aria-controls="dropdown-menu3">Publishing and literary prizes <i class="fas fa-angle-down" aria-hidden="true"></i></a>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<ul class="dropdown-content">
<li><a href="#" class="dropdown-item"><strong>Publishing and literary prizes</strong></a></li>
<li><a href="#" class="dropdown-item">Andre Deutsch Collection</a></li>
<li><a href="#" class="dropdown-item">Book Design Collections</a></li>
<li><a href="https://static.brookes.ac.uk/design-system/testing/library2/booker-prize-archive.html" class="dropdown-item">Booker Prize Archive</a></li>
<li><a href="#" class="dropdown-item">Books that shaped the Century</a></li>
<li><a href="#" class="dropdown-item">Early Children's Book Collection</a></li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-trigger has-text-black" href="#" aria-haspopup="true" aria-controls="dropdown-menu4">Public and allied health <i class="fas fa-angle-down" aria-hidden="true"></i></a>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<ul class="dropdown-content">
<li><a href="#" class="dropdown-item"><strong>Public and allied health</strong></a></li>
<li><a href="#" class="dropdown-item">Dorset House Archive</a></li>
<li><a href="#" class="dropdown-item">Medical Sciences Video Archive</a></li>
<li><a href="#" class="dropdown-item">Sally Croft Collection</a></li>
<li><a href="#" class="dropdown-item">Welfare Collection</a></li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-trigger has-text-black" href="#" aria-haspopup="true" aria-controls="dropdown-menu5">Oxford Brookes University <i class="fas fa-angle-down" aria-hidden="true"></i></a>
<div class="dropdown-menu" id="dropdown-menu5" role="menu">
<ul class="dropdown-content">
<li><a href="#" class="dropdown-item"><strong>Oxford Brookes University</strong></a></li>
<li><a href="#" class="dropdown-item">Oxford Brookes University Collection</a></li>
<li><a href="#" class="dropdown-item">Brookes Collections held at the Oxford Centre for Methodism and Church History</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</section>- Breadcrumbs should be right after the global navigation. If there is a banner on the page, it should sit above that too.
- 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 chevron or slash to indicate each level.
- The navigation root is the first element, the current location is the last element
- The current location should not be clickable.
- 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.