Mobile controls
Mobile controls are mobile-friendly website search and navigation. Search and navigation toggle buttons expand and collapse when interacted with in mobile view.
It includes:
- Search toggle button
- Navigation toggle button
Sample
Mobile

HTML
Include path
Add Mobile Controls njk
include code after Site header include:
{% include "src/_includes/mobile-controls.njk" %}
Note: Path to the include will be relative to the directory of your page.
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.
By default, the text identifier for the search button is "Search" and text identifier for the navigation button is "Menu."
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