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

Mobile Controls screenshot

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