Taxonomic name: A-BREADCRUMB
Added on: v3.0.0 (15/09/17)
Updated on: v5.8.0 (15/06/21)

Breadcrumb

A breadcrumb trail is used to help customers identify their location with the website navigation structure. Breadcrumbs can only be used in the footer not applied elsewhere on a page, but should be present on all pages (from the home page down) on all sites for both accessibility and SEO reasons.

Design and usage

For a partial trail which can be used with heading groups and tabs at the top of a page, please see the Wayfinder documentation.

Structure

The breadcrumb trail should consist of a link to every page required to reach the current one, from the home page onwards. The page the user is currently on is displayed is hidden from view, as not only will the text for this page match the main page heading, but a link that redirects the user back to the current page could potentially be confusingly.

Desktop

Consists of a list of links to every page required to reach the current one, with the current page hidden from view.

Tablet and mobile

Consists of a list of links to every page required to reach the current one, with all links apart from the current page's direct parent hidden from view.

Labels

Must match the page titles of the pages they reference.
Each page is an anchor link with a hidden hit target 44px high.

Placement

Always placed at the top of a page, visually directly below the masthead eg. within a hero section
Integration support for:

Accessibility and screen readers

Hidden pages should not be read out for screen readers.
All anchor links have a minimum target size of 44px.

Use case and exception scenarios

Use of breadcrumb may not be appropriate for single-page microsites or stepped form journeys detatched from the normal flow of pages. In these instances, please seek further guidance before proceeding without a breadcrumb trail.

Examples

Interactive examples

Code example

For placement specifics within supported components see the relevant component documentation:

If not being used within one of the supported components it is recommended that it is simply placed within an l-content-container to maintain horizontal positioning and not within any l-section area to maintain a consistent vertical position from the masthead.

<nav class="a-breadcrumb" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
	<p class="u-hidden--visually">You are currently within </p>
	<ol class="a-breadcrumb-list">
		<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<meta itemprop="position" content="1" />
			<a class="a-breadcrumb-page" itemprop="item" href="...">
				<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
			</a>
		</li>
		<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<meta itemprop="position" content="2"  />
			<a class="a-breadcrumb-page" itemprop="item" href="...">
				<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
			</a>
		</li>
		...
		<li class="a-breadcrumb-list__item a-breadcrumb-list__item--parent" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<meta itemprop="position" content="..."  />
			<a class="a-breadcrumb-page" itemprop="item" href="...">
				<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
			</a>
		</li>
		<li class="a-breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<meta itemprop="position" content="..." />
			<a class="a-breadcrumb-page" itemprop="item" href="..." tabindex="-1" aria-current="page">
				<span class="a-breadcrumb-page__inner" itemprop="name">...</span>
			</a>
		</li>
	</ol>
</nav>

Footer variant - DEPRECATED

The footer variant of the breadcrumb has been deprecated and should only be used to preseve consistency through particular journeys. This change has been made to help with user orientation whilst navigating Abeille Assurances' websites, so please switch to using the standard version wherever possible.

Structure

Always part of the footer element.
Footer section area comes with this component and its top and bottom padding is fixed.
The breadcrumb trail should consist of a link of every page required to reach the current one, from the home page onwards. The page the user is currently on is displayed as standard text rather than a link (since having a link here would not make sense since it would, potentially confusingly, simply redirect the user back to the current page).
Displays all links within the breadcrumb, including the current page, at all screen sizes.

Placement

Always placed within the footer at the bottom of the page.
PROHIBITED: Placed anywhere else.

Development and test

Notes for developers

Ensure that the meta information and various schemae are correctly populated, eg. the position of the page.

Notes for testers

Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard
Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page
Ensure that when hovering over a link the style changes noticeably.
Ensure that when a link has focus the style changes noticeably.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to
`.a-breadcrumb`	Base style for the breadcrumb element	Yes	`nav`
`.a-breadcrumb-list`	Styles the list within the breadcrumb element	Yes	`.a-breadcrumb ol`
`.a-breadcrumb-list__item`	Styles the list items within the breadcrumb list element	Yes	`.a-breadcrumb-list > li`
`.a-breadcrumb-list__item--parent`	Modifer in order to display only this link at mobile and tablet (when not placed within the footer)	Yes	`.a-breadcrumb-list__item`
`.a-breadcrumb-page`	Styles the links within the breadcrumb	Yes	`.a-breadcrumb-list__item > a`
`.a-breadcrumb-page__inner`	Styles the links within the breadcrumb	Yes	`.a-breadcrumb-page > span`

Keyboard operations

TAB: Tabbing to a link should make the link clearly visually different so that the focus point on the page is obvious to the user.
Enter: When JavaScript is available and at medium and large screen sizes, hitting enter on an area tab link will display the countries for that area and the other countries will become hidden.

Component releases

Added on: v3.0.0 (15/09/17)
Updated on: v5.8.0 (15/06/21)

Latest update:

New breadcrumb variant for use at the top of pages, replacing the wayfinder and footer variant of the breadcrumb, designed to help with user orientation whilst navigating Abeille Assurances' websites. Note that the class a-breadcrumb-list__item--parent is required for the new breadcrumb variant to correctly hide all but the parent level link at mobile and tablet screens sizes.
updated: The chevrons used within the footer variant of the breadcrumb have been reduced in size slightly to match with the new breadcrumb variant.
deprecated: The footer variant of the breadcrumb has been deprecated and replaced by a new version of the breadcrumb that should be used at the top of pages in place of the wayfinder and the footer variant of the breadcrumb. This change has been made to help with user orientation whilst navigating Abeille Assurances' websites.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team