Linear navigation

Taxonomic name: M-LINEAR-NAVIGATION

Beta v.1.1.1 - Updated 17/01/17.

Molecule

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.

Examples

Contents

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 text descriptive text can be hidden visually from the user to aid in make the link understandable especially if there area number of links such as "Find out more" on the page which go to different locations.

Code Examples

Contents

<div class="l-content-container m-linear-navigation [ Modifiers ]" data-module="m-linear-navigation">
	<h2 class="u-margin--top-none m-linear-navigation__heading">Contents</h2>
	<ul class="ordered-list m-linear-navigation__list">
		<li class="m-linear-navigation__current"><span>...</span></li>
		<li><a href="...">...</a></li>
		...
	</ul>
</div>

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-linear-navigation Base style for linear navigation Yes .l-content-container  
.m-linear-navigation__heading" Style for heading above linear list (not shown at mobile) Yes .m-linear-navigation > h2  
.m-linear-navigation__list Base style for linear navigation list Yes .m-linear-navigation > ul.ordered-list  
.m-linear-navigation__current Base style for current linear navigation list item Yes .m-linear-navigation__list > 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.