Full screen navigationStatusrelease

Show and hide full screen navigation.

Guidance

Use this pattern for navigation that take over the whole screen and prevent interaction with the rest of the page until it is closed.

This pattern differs from a modal dialog because it is CSS-based and does not require being marked up as a dialog. This is useful if you want the same nav mark up used as both inline navigation (visible on large screens) and off-canvas or modal-like navigation on small screens.

When the full screen menu is open, it shouldn't be possible for the user to access the content beneath via mouse, keyboard or other means. At the time of writing, the most cross-device compatible way to achieve this is by setting all other elements to display: none !important;visibility: hidden !important; in CSS using the toggle classes provided on the body tag.

Example

Open in a new tab

Dependencies and installation

Package	Installation
@stormid/toggle	`npm i -S @stormid/toggle`

Code

<nav aria-label="Primary navigation"><button type="button" class="full-screen-nav__btn js-full-screen-nav__toggle" aria-label="Open menu" aria-controls="full-screen-navigation" aria-expanded="false"><svg focusable="false" class="full-screen-nav__btn-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>menu</button><div id="full-screen-navigation" class="js-full-screen-nav full-screen-nav" data-toggle="js-full-screen-nav__toggle"><ul class="wrap full-screen-nav__list"><li class="full-screen-nav__item"><a class="full-screen-nav__link" href="#">Item 1</a></li><li class="full-screen-nav__item"><a class="full-screen-nav__link is--active" href="#" aria-current="page">Item 2</a></li><li class="full-screen-nav__item"><a class="full-screen-nav__link" href="#">Item 3</a></li><li class="full-screen-nav__item"><a class="full-screen-nav__link" href="#">Item 4</a></li><li class="full-screen-nav__item"><a class="full-screen-nav__link" href="#">Item 5</a></li></ul><button type="button" class="full-screen-navigation__close js-full-screen-nav__toggle" aria-label="Close menu">close</button></div></nav>

import toggle from '@stormid/toggle';

toggle('.js-full-screen-navigation');

Acceptance criteria

The following is a list of example acceptance criteria to test against when using this pattern. These critera should test that the specific markup requirements are met, and that the navigation behaves visually and functionally as expected.

For validation in developer tools / web inspector

An HTML
```
<button>
```
element is used to open the navigation
An HTML
```
<button>
```
element is used to close the navigation
The open and close
```
<button>
```
elements should have an
```
aria-controls
```
attribute. The value of this should match the ID of the element being shown/hidden.
The navigation should be contained within an HTML
```
<nav>
```
element
Buttons should be contained within the
```
<nav>
```
element
The
```
<div>
```
element containing the popup menu elements should not have a
```
role=menu
```
attribute
The navigation should be labelled appropriately to describe its function (e.g. 'Primary Navigation'). This can be done by an HTML heading element being the first item in the navigation, or an
```
aria-label
```
on the
```
<nav>
```
element itself
The currently active navigation link should have
```
aria-current
```
attribute with its value set to 'page'

For visual validation

Navigation open and close buttons should have a clearly visible focus style which meets accessibility contrast requirements
Navigation open and close buttons should be appropriately labelled to describe their functionality. If the design requires no visible text, a label should be added as an
```
aria-label
```
attribute on the
```
<button>
```
element
Navigation toggle buttons should be no less than 44px x 44px in size (unless any of the allowed WCAG exceptions apply)
Navigation links should be hidden visually, hidden from keyboard access and not read by screenreaders when the menu is closed
Navigation links should be visible, available for keyboard access and read by screen readers when the menu is opened
Navigation link text should accurately describe the link destination

For functional validation

Navigation open and close buttons should be available to be tabbed to and activated via keyboard
The navigation close button should receive keyboard focus in a logical order. The design may require it to be positioned top right (for example) but the
```
<button>
```
can be the last HTML element in the navigation, so long as tabbing behaves consistently
Navigation links should be available to be tabbed to and activated via keyboard
The first navigation link should receive visible focus when navigation is opened
When the navigation is open, it should not be possible to access the page content underneith via mouse, keyboard or any other means

UI Patterns