Skip to contentSkip to footer
Give feedbackv3.0.2

Breadcrumbs

The breadcrumb is an important part of the user journey. It helps users arriving deep into the site to orientate themselves and also allows advisers to describe the journey that leads to the content page. Breadcrumbs should appear on all pages, the only time they won’t change is when a user is completing a tool or wizard.

The current page shouldn’t be linked in the breadcrumb. The labels should match the previous pages titles and link back to them. It doesn’t need to start on the home page but a link back to the navigation page should be the first link in the breadcrumb trail.

<nav class="main-breadcrumb">
	<div class="main-breadcrumb__content">
		<span class="breadcrumb__item">
			<a href="../index.html" title="Home">Home</a>
			<i class="icon-guillemet-right"></i>
		</span>
		<span class="breadcrumb__item">
			<a href="../index.html#Navigation" title="Navigation">Navigation</a>
			<i class="icon-guillemet-right"></i>
		</span>
		<span class="breadcrumb__item">
			Breadcrumbs
		</span>
	</div>
</nav>