• Molecule
  • CORE COMPONENT
  • Taxonomic name: M-NAVIGATION-SECONDARY
  • Extension: SUPPORTING-NAVIGATION
  • Added on: v5.0.0 (05/10/20)
  • Updated on: v5.11.0 (07/09/21)

Secondary navigation

This component provides in-page navigation that can sit either flush below a hero, or as a stand alone component elsewhere on a page, and which will smoothly scroll the user to sections of content on the same page.

Design and usage

  • Will smoothly scroll down to in-page sections when an option is selected, but will not stick to the top of the browser window.
  • Built to work on all accent colours, with the default being a yellow background.
  • Link titles should be no more than 55 characters each.
  • Standard version must have a minimum three options and a maximum of five.
  • Icons should be used where possible with the standard version to aid scanability and recall, although they may be ommited if for some reason icon usage is not possible in your design. When used, icons should be SVGs, 32x32px in Abeille Assurances blue if used on yellow, or white on dark accent colours.
  • Long version version can have no minimum or maximum, but is recommended for use from a minimum of six items to a maximum of 12. Icons are not used with this variant, but if being used for in-page links, then an ordered list variant (with numerical indicators); if the links are to different pages within the same section, then the unordered list variant (with chevrons) should be used instead, along with the indicator to show which page the user is presently on.
  • It is suggested that a heading is used for the long variant making it clear that the navigation contains links which are either in-page ("What's on this page" or similar) or to additional pages ("In this section" or similar).
  • It is recommended that secondary navigation links only link to pages either within the same page or the same section. It is possible to link to external pages and include an indicating icon within the long variant of the navigation.

Examples

Standard variant

Interactive example

Code example

<nav class="m-navigation-secondary [ modifiers ]">
	<ul class="m-navigation-secondary-list a-list-plain">
		<li class="m-navigation-secondary-list__item">
			<a href="..." class="m-navigation-secondary-link">
				<img src="..." class="m-navigation-secondary-link__icon" decoding="async" width="32" height="32" alt="" />
				<span class="m-navigation-secondary-link__text">...</span>
			</a>
		</li>
		...
	</ul>
</nav>

Standard variant without icons

Interactive example

Code example

<nav class="m-navigation-secondary [ modifiers ]">
	<ul class="m-navigation-secondary-list a-list-plain">
		<li class="m-navigation-secondary-list__item">
			<a href="..." class="m-navigation-secondary-link">
				<span class="m-navigation-secondary-link__text">...</span>
			</a>
		</li>
		...
	</ul>
</nav>

Long variant - in-page links

Interactive example

Code example

<nav class="m-navigation-secondary m-navigation-secondary--long" aria-label="..." data-module="m-navigation-secondary">
	<h2 class="a-heading a-heading--2 a-heading--semibold m-navigation-secondary__heading">What's on this page:</h2>
	<ol class="m-navigation-secondary-list a-list-ordered">
		<li class="m-navigation-secondary-list__item">
			<a href="..." class="m-navigation-secondary-link">
				<span class="m-navigation-secondary-link__text">...</span>
			</a>
		</li>
		...
	</ol>
</nav>

Long variant - links to other pages

Interactive example

Code example

<nav class="m-navigation-secondary m-navigation-secondary--long" aria-label="..." data-module="m-navigation-secondary">
	<h2 class="a-heading a-heading--2 a-heading--semibold m-navigation-secondary__heading">In this section:</h2>
	<ul class="m-navigation-secondary-list a-list-unordered">
		<li class="m-navigation-secondary-list__item">
			<a href="..." class="m-navigation-secondary-link">
				<span class="m-navigation-secondary-link__text">How we help</span>
			</a>
		</li>
		...
	</ul>
</nav>

Long variant - in column layouts

Development and test

Notes for developers

Each instance of a secondary navigation item should include an aria-label to help with landmark signposting for assistive technologies. The value of this could simply be "Secondary navigation", but something more descriptive, such as "What's on this page", "In this section" or "Contents", would be more helpful.

To include an external link icon on the long secondary navigation variant, the markup can be combined with the tertiary button for example:

<a href="..." title="External link - ..." rel="external" class="m-navigation-secondary-link a-button a-button--tertiary a-button--external">
	<span class="m-navigation-secondary-link__text a-button__inner">...</span>
</a>

To mark a page as selected, the class m-navigation-secondary-list__item--selected must be included on the m-navigation-secondary-list__item element and the link must become an span, or be disabled so that is can not be navigated too. For example:

<li class="m-navigation-secondary-list__item m-navigation-secondary-list__item--selected">
	<span class="m-navigation-secondary-link">
		<span class="m-navigation-secondary-link__text" aria-current="page">...</span>
	</span>
</li>

Or

<li class="m-navigation-secondary-list__item m-navigation-secondary-list__item--selected">
	<a href="..." tabindex="-1" class="m-navigation-secondary-link" aria-current="page">
		<span class="m-navigation-secondary-link__text">...</span>
	</a>
</li>

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:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/supporting-navigation.css" rel="stylesheet" />

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-secondary Base style for secondary navigation Yes .l-content-container  
.m-navigation-secondary--icons Additional style for use with icon variant .l-content-container Required if icons are used
.m-navigation-secondary--long Additional style for long list variant (six items or more, or in columns) .l-content-container Forced if more list conatins more than five items
.m-navigation-secondary__heading Style for heading above navigation items list .m-navigation-secondary > h2 Required for --long variant
.m-navigation-secondary-list Base style for linear navigation list Yes .m-navigation-secondary > ol.a-list-ordered / ul.a-list-unordered  
.m-navigation-secondary-list__item Base style for list item Yes .m-navigation-secondary-list > li  
.m-navigation-secondary-list__item--selected Base style for selected/current list item Yes .m-navigation-secondary__list > li  
.m-navigation-secondary-link Base style for list item inner link Yes .m-navigation-secondary-list__item > a
.m-navigation-secondary-list__item > span 		 
.m-navigation-secondary-link__icon Base style for list item inner icon .m-navigation-secondary-link > img  
.m-navigation-secondary-link__text Base style for list item inner link description Yes .m-navigation-secondary-link > span  

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: v5.0.0 (05/10/20)
  • Updated on: v5.11.0 (07/09/21)

Latest update:

  • fixed: Fix for JavaScript error occuring if current page text for 'in section' variant was clicked.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team