REMOVED
This component has been removed from the Framework. Move to using secondary navigation.
- Taxonomic name: M-NAVIGATION-NON-LINEAR
- Added on: v3.0.0 (15/09/17)
- Removed on: v5.0.0 (05/10/20)
Non-linear navigation
This component provided simple inline secondary or tertiary navigation.
Design and usage
- The lists will automatically balance across the width of the section, but are set to keep whole links together so they do not break onto multiple columns.
- Default layout is for four columns in a large view, collapsing to two columns at a medium view, and a single column at mobile.
- Built to work on light and dark accent colours.
Examples
Interactive example
Code example
<div class="l-content-container [ Modifiers ]">
<h2 class="a-heading a-heading--2 a-heading--light u-margin--top-none">In this section</h2>
<ul class="a-list-unordered m-navigation-non-linear">
<li class="m-navigation-non-linear__current"><span>...</span></li>
<li><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...</span></a></li>
...
</ul>
<p><a href="..." class="a-button a-button--primary">Back to parent page</a></p>
</div>Development and test
Notes for developers
Extension component
This component forms part of the 'supporting-navigation' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<!--[if !IE | gt IE 8]><!-->
<link media="all" href="[ CDN Folder Path ]/css/customer/supporting-navigation.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lte IE 8]>
<link media="all" href="[ CDN Folder Path ]/css/customer/supporting-navigation-unmq.css" rel="stylesheet" />
<![endif]-->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.
- Ensure that text within links is descriptive of what or where the link is going. Additional descriptive text can be hidden visually from the user to help make the link understandable especially if there area number of links such as "Find out more" on the page which go to different locations.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-navigation-non-linear |
Base style for non-linear navigation list | Yes | ul.a-list-unordered |
Only style requied for non-linear navigation lists |
.m-navigation-non-linear__current |
Base style for current linear navigation list item | Yes | .m-navigation-non-linear > li |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the social link clearly visually different so that the focus point on the page is obvious to the user.
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the relevant page.
Component releases
- Added on: v3.0.0 (15/09/17)
- Removed on: v5.0.0 (05/10/20)
Latest update:
- Component removed in order to consolidate the in-page, linear and non-linear navigation patterns into a single secondary navigation pattern. Move to using secondary navigation.