Please move to using the wayfinder instead of this component as soon as possible.
Taxonomic name: A-BREADCRUMB
v.3.0.0 - Updated 11/09/17.
Breadcrumbs are a secondary navigation element that can help users to orientate themselves within a site by indicating location within a hierarchy of content.
- Use breadcrumbs for large sites that are organised into a hierarchy of logical categories.
- Breadcrumbs should be a set of horizontal links, separated by the 'greater than' symbol (>), and will usually be situated left‐aligned, underneath the primary navigation.
- Breadcrumbs allow users to skip back to higher level pages, without having to click through every page in the previous journey.
- Breadcrumbs are built to work on light and dark accent colours.
- Breadcrumbs are usually not required on a homepage.
- If a site has shallow hierarchy, or if the primary navigation model effectively indicates a user's location within the hierarchy of the site, breadcrumbs may not be necessary.
- Breadcrumbs may also not be required if an alternative secondary navigation device is in place.
- As a secondary navigation device, breadcrumbs shouldn’t conflict with, or be more prominent than, the primary navigation.
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.
<p class="a-breadcrumb"> <span class="u-hidden--visually">You are currently within </span> <span itemscope="" itemtype="http://schema.org/BreadcrumbList"> <a class="a-breadcrumb__link" href="..." itemprop="url"><span itemprop="title">...</span></a> </span> <span class="a-breadcrumb__separator">></span> <span itemscope="" itemtype="http://schema.org/BreadcrumbList"> <a class="a-breadcrumb__link" href="..." itemprop="url"><span itemprop="title">...</span></a> </span> <span class="a-breadcrumb__separator">></span> <span class="a-breadcrumb__current">...</span> </p>
The following table gives you a quick overview of the CSS classes that can be applied.
||Base style for the breadcrumb element||Yes||
||Styles the links within the breadcrumb||Yes||
||Adds in and styles the arrow within the breadcrumb||Yes||
||Styles a p tag to show the page that you are currently visiting||Yes||