Taxonomic name: M-NAVIGATION-LINEAR
v.4.16.0 - Updated 06/12/19. Archives
This component provides simple inline secondary or tertiary navigation.
- 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 four columns in a large view, collapsing to two columns at a medium view, and a single column at mobile, with the linear navigation becoming a show/hide.
- Built to work on light and dark accent colours.
Notes for developers
Optional code changes available using tertiary buttons
Following WCAG 2.1 criterion 2.5.5: Target Size, please use this new mark up variant using tertiary buttons so that target sizes are large enough for users to easily activate them, even if the user is accessing content on a small handheld touch screen device, has limited dexterity, or has trouble activating small targets for other reasons. The old mark up will continue to be supported for the remainder of Framework version 4.x.x.
<li><a class="a-button a-button--tertiary a-button--tertiary-shallow" href="..."><span class="a-button__inner">...</span></a></li>
This component forms part of the 'supporting-navigation' extension and so requires additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheets:
<!--[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.
<div class="l-content-container m-navigation-linear [ Modifiers ]" data-module="m-navigation-linear"> <h2 class="u-margin--top-none m-navigation-linear__heading">Contents</h2> <ul class="a-list-ordered m-navigation-linear__list"> <li class="m-navigation-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> </div>
The following table gives you a quick overview of the CSS classes that can be applied.
||Base style for linear navigation||Yes||
||Style for heading above linear list (not shown at mobile)||Yes||
||Base style for linear navigation list||Yes||
||Base style for current linear navigation list item||Yes||