Breadcrumbs
All pages, except the homepage, mandatorily display Breadcrumbs to facilitate orientation and navigation on the website. This is a standard that must be included on the top-left corner of every page, just below the primary navigation.
- Overview
- Specification
- Style Guide Manager
- Example in Situ
- Usage
Tablet
MobileSpecification
This provides guidance on the build, layout and content options for this component.
Layout specification
| Component item | Requirement & purpose | Optional or mandatory | CMS options |
|---|---|---|---|
| n/a | n/a | n/a | n/a |
Interaction
These are the interactive aspects of the component
| Interaction |
|---|
| Clicking an upper level of breadcrumb links to the previous level. |
These are the Style Guide Manager settings that are specific to this component. For global settings see the Style Guide Manager section.
| Property | Global | Default | SGM override |
|---|---|---|---|
| Padding top/bottom | Yes | 16px | Slider - max 50px |
| Background colour | Yes | Transparent | Colour pallete |
Alka-Seltzer
Claritin
Alka-Seltzer
Claritin
Alka-Seltzer
ClaritinGeneral usage dos and don'ts
| ✅ Do's | ❌ Don'ts |
|---|---|
| Breadcrumbs have 2 primary functions for websites: optimal user experience and SEO value. The user experience is to provide context to page location and its relation to other site content. SEO value is to provide context to the search engine crawlers that are tasked with organising site content for organic search results. | |
| These must be configured at template level, not manually added to each page. | Do not add these when creating page layouts and content. |