Taxonomic name: BREADCRUMB
Beta v.1.0.5 - Updated 01/03/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="breadcrumb"> <span class="u-hidden--visually">You are currently within </span> <span itemscope="" itemtype="http://schema.org/BreadcrumbList"> <a class="breadcrumb__link" href="..." itemprop="url"><span itemprop="title">...</span></a> </span> <span class="breadcrumb__gt">></span> <span itemscope="" itemtype="http://schema.org/BreadcrumbList"> <a class="breadcrumb__link" href="..." itemprop="url"><span itemprop="title">...</span></a> </span> <span class="breadcrumb__gt">></span> <span class="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||