Mobile controls

Mobile controls is mobile-friendly website navigation. The navigation toggle button expands and collapses the navigation menu when interacted with in mobile view.

Sample

Example
Source code

Example

Mobile

HTML Source code

HTML

Usage

When and how to use it

This is an essential template structural component. Without it, people could not open the site navigation or search bar in mobile view. It should be placed right below the site header.

Accessibility

Standard accessibility review

Each time a new component version is published:

Test with the axe accessibility tool
Review with the VoiceOver or NVDA screen reader
Ensure all actionable elements are accessible by keyboard command and tab in a logical order
Check the component layout on a variety of screen sizes