C04. Breadcrumbs
- Japneet Kaur (Deactivated)
Analytics
Release notes
Date | Update | Updated by |
|---|---|---|
13 Jan 2022 | Component finalised | @Japneet Kaur (Deactivated) @Steven Mao (Unlicensed) |
Overview
Objective
Breadcrumbs are used a type of secondary navigation allowing users to know their current location in a website’s information architecture.
Use case
As a user, I want to use breadcrumbs so that I can navigate back to previous pages.
Business rules
BR-# | Business rules |
|---|---|
BR-1 | The breadcrumb provides a trail from the current page to previous pages based on the IA. |
BR-2 | The last item on the breadcrumb trail will not be a hyperlink. There is different styling to indicate that it is the current page. |
BR-3 | The breadcrumb is not content managed and will be automatically generated using page titles and the site information architecture. |
BR-4 | The home page will be the first breadcrumb link, followed by level 1 landing pages e.g. ways to get help etc. The number of links in the breadcrumb should be determined by where the page is situated on the site map. |
BR-5 | The breadcrumb will display the first link, last link and then however many links fit within the width of the breadcrumb container. |
BR-6 | The breadcrumb may appear on the following templates: |
BR-7 | Breadcrumbs will not appear on mobile devices as a trail. There will be a ‘Previous page’ link instead. |
BR-8 | A chevron icon is placed in between different sections of the breadcrumb. |
Design
Desktop | Mobile |
|---|---|
 Example of a breadcrumb | 
|
CMS Elements
# | Title | Type | Mandatory | Action | Additional Notes & Rules |
|---|---|---|---|---|---|
1 | Chevrons | Icons | Y | N/A | Chevrons are used to separate different parts of the breadcrumb. |