Breadcrumbs

Breadcrumbs provide secondary navigation to help users understand where they are on 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-black" href="/">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="#" 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>

Usage

  • Breadcrumbs should appear straight after the global navigation. If there is a banner on the page, it should sit above that.
  • Breadcrumbs should be used on every page except the homepage. It 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.

Accessibility

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.