DEPRECATED
This component has been deprecated. Move to using breadcrumb trail at the top of pages.
- Taxonomic name: A-WAYFINDER
- Extension: SUPPORTING-NAVIGATION
- Added on: v3.4.0 (08/06/18)
- Updated on: v5.8.0 (15/06/21)
Wayfinder
Wayfinder can be used in addition to the footer-based breadcrumb trail to help customers identify their location within the website navigation structure at a glance. It can only be used in this organism and must not be applied elsewhere on a page.
Design and usage
While similar to the traditional breadcrumb navigation, there are some important differences, as outlined below.
Structure
- Additional to, not in place of, the footer-based breadcrumb trail (as wayfinder does not meet the required accessibility and SEO requirements).
- Always paired with a H1 and an optional H2 at the top of the page.
- Section area comes with this component and its top and bottom padding is fixed.
- Section can be used with all accent colours.
- The page the user is on should not be included; the H1 serves this purpose.
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 the page.
- PROHIBITED: Placed anywhere else.
Accessibility and screen readers
- Hidden pages should not be read out for screen readers
Use case and exception scenarios
AEM sites
| Level | AEM page template | Levels to show |
|---|---|---|
| L0 | Home | None |
| L1 | Gateway / Family | None |
| L2 | Category | None |
| L3 | Product page | None |
| L4 | Editorial | L3 |
| Ln | n | Ln - 5 > Ln - 4 > Ln - 3 > Ln - 2 > Ln - 1 |
| Ln example | L9 page | L4 > L5 > L6 > L7 > L8 |
Non-AEM site
| Level 0 | Page type | Levels to show |
|---|---|---|
| L0 | Public site homepage | None |
| L1 |
Portal homepage Your policies (MyAviva, Abeille Assurances et moi) |
None |
| L2 |
MyAviva Policy landing page Profile page |
L2 |
| L3 | Child page | L1 > L2 |
| L4 | Baby page | L1 > L2 > L3 |
| L5 | L1 > L2 > L3 > L4 | |
| Ln | n | Ln - 5 > Ln - 4 > Ln - 3 > Ln - 2 > Ln - 1 |
| Ln example | L9 page | L4 > L5 > L6 > L7 > L8 |
Exceptions
| Level | Page type | Levels to show |
|---|---|---|
| L2 onwards | Pages with progress bars | No |
| User journeys with multiple steps of pages without progress bars (like UK change of address journey) | No | |
| Single process pages like UK change of email address | No |
Examples
Standard wayfinder
Interactive example
Code example
<div class="l-section l-section--highlight [ Modifiers ]">
<div class="l-content-container">
<div class="a-wayfinder">
<p class="u-hidden--visually">You are currently within </p>
<ol class="a-wayfinder-list">
<li class="a-wayfinder-list__item">
<a class="a-wayfinder-link" href="...">
<span class="a-wayfinder-link__inner">...</span>
</a>
</li>
<li class="a-wayfinder-list__item">
<a class="a-wayfinder-link" href="...">
<span class="a-wayfinder-link__inner">...</span>
</a>
</li>
<li class="a-wayfinder-list__item">
<a class="a-wayfinder-link" href="...">
<span class="a-wayfinder-link__inner">...</span>
</a>
</li>
</ol>
</div> <h1 class="a-heading a-heading--1 a-heading--semibold">...</h1>
<!-- Optional sub-heading -->
<h2 class="a-heading a-heading--2 a-heading--light [ Modifiers ]">...</h2> <!-- Any additional content for the section -->
</div>
</div>Wayfinder within primary tabs
Interactive example
Code example
<div class="l-section o-tabs-primary">
<div class="o-tabs-primary__heading">
<div class="l-content-container">
<div class="a-wayfinder">
<p class="u-hidden--visually">You are currently within </p>
<ol class="a-wayfinder-list">
<li class="a-wayfinder-list__item">
<a class="a-wayfinder-link" href="#example">
<span class="a-wayfinder-link__inner">Level 2</span>
</a>
</li>
<li class="a-wayfinder-list__item">
<a class="a-wayfinder-link" href="#example">
<span class="a-wayfinder-link__inner">Level 3</span>
</a>
</li>
<li class="a-wayfinder-list__item">
<a class="a-wayfinder-link" href="#example">
<span class="a-wayfinder-link__inner">Level 4</span>
</a>
</li>
</ol>
</div> <h1 class="a-heading a-heading--1">...</h1>
</div>
</div>
<div class="o-tabs-primary__tabs m-tabs" data-module="m-tabs" data-module-load="true">
<h2 class="a-heading a-heading--2 a-heading--light m-tabs__heading">...</h2>
<div class="m-tabs__content">
<div class="l-content-container">
...
</div>
</div>
...
</div>
</div>Development and test
Notes for developers
The Wayfinder should be built as a full component and u-hidden--visually must be applied to page level links that should be hidden. See user guide for further details on this.
There is no breadcrumb on the home page or level 1 pages
PROHIBITED: breadcrumb on pages with a progress bar
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 | Comments |
|---|---|---|---|---|
.a-wayfinder |
Base style for the wayfinder element | Yes | p |
|
.a-wayfinder-list |
Styles the wayfinder list | Yes | .a-wayfinder > ol |
|
.a-wayfinder-list__item |
Styles the list items within the wayfinder list element | Yes | .a-wayfinder-list > li |
|
.a-wayfinder-link |
Styles the links within the wayfinder | Yes | .a-wayfinder-list__item > a |
|
.a-wayfinder-link__inner |
Styles the links within the wayfinder | Yes | .a-wayfinder-link > 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.4.0 (08/06/18)
- Updated on: v5.8.0 (15/06/21)
Latest update:
- deprecated: Wayfinder has been deprecated and been 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.
- fixed: Fix for spacing above wayfinder when placed within different l-section areas.