REMOVED
This component has been removed from the Framework. Move to using secondary navigation.
- Taxonomic name: M-NAVIGATION-INPAGE
- Added on: v3.0.0 (15/09/17)
- Removed on: v5.0.0 (05/10/20)
In-page navigation
This component provided in-page navigation that sat flush below the hero component on a page and smoothly scrolled 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.
- Must have a minimum 3 options and a maximum of 5
- Must only ever appear directly below the hero banner.
- Must only ever be placed on a yellow or dark accent background
- Icons used must be transparent PNGs, 32px by 32px in Abeille Assurances blue if used on yellow or white on dark accent colours. Inclusion of icons should be used as a first port of call to aid scan-ability and recall. If for some reason icon usage is not possible in your design they may be ommited.
Examples
In-page navigation with icons
Interactive example
Code example
<div class="m-hero-wrapper">
...
</div>
<div class="[ Accent modifiers ]">
<div class="l-content-container">
<ul class="m-navigation-inpage a-list-plain" data-module="m-navigation-inpage">
<li class="m-navigation-inpage__item">
<a href="..." class="m-navigation-inpage-link">
<img src="[ URL to icon PNG ]" class="m-navigation-inpage-link__icon" decoding="async" width="32" height="32" alt="" />
<span class="m-navigation-inpage-link__text">...</span>
</a>
</li>
...
</ul>
</div>
</div>In-page navigation with no icons
Interactive example
Code example
<div class="m-hero-wrapper">
...
</div>
<div class="[ Accent modifiers ]">
<div class="l-content-container">
<ul class="m-navigation-inpage m-navigation-inpage--no-icons a-list-plain" data-module="m-navigation-inpage">
<li class="m-navigation-inpage__item">
<a href="..." class="m-navigation-inpage-link">
<span class="m-navigation-inpage-link__text">...</span>
</a>
</li>
...
</ul>
</div>
</div>Development and test
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.
- The smooth scrolling to sections is only available when JavaScript is available
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-inpage |
Wrapper for the in-page navigation | Yes | .t-accent-[ Modifier ] > .l-content-container > ul.a-list-plain |
|
.m-navigation-inpage--no-icons |
Modifier to adjust spacing for when no icons are used within the in-page navigation | .m-navigation-inpage |
||
.m-navigation-inpage__item |
Wrapper for each item within the in-page navigation | Yes | .m-navigation-inpage > li |
Minimum of 3, maximum of 5 |
.m-navigation-inpage-link |
Style for each link | Yes | .m-navigation-inpage__item > a |
|
.m-navigation-inpage-link__icon |
Styling for icon that appears within each link | Yes | .m-navigation-inpage-link > img |
|
.m-navigation-inpage-link__text |
Styling for the text that appears within each link | Yes | .m-navigation-inpage-link > span |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the 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 smoothly scroll the window down to the relevant section on the 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.