M016: Vertical navigation mechanisms for narrow width screens

User Problem

Many websites are designed for a desktop viewing experience. Seen on the narrow display of a mobile device, this means that the browser's viewport shows just a part of the content. The width of content elements like horizontal menus often exceeds the width of display. On sites that are not responsive, this necessitates horizontal panning in order to activate menu items that are not within the current viewport.

Solution and Examples

Responsive Web Design (RWD) can alleviate this problem by offering a navigation menu in different formats depending on the actual width of the device screen (technically, the width of the browser viewport(). A menu that is shown as horizontal band in a desktop browser can be shown as vertical list onto the narrow screen of a mobile device.

The RWD approach uses so-called break points (CSS 3 @media selectors) that define different content renderings for specific ranges of viewport widths. Designers often use breakpoints to define different site layouts for the desktop, for tablets, and for smartphones.

A very common RWD pattern is to render the main navigation menu as single menu toggle button on narrow viewports. The aim is to ensure that main content stays visible even on small screens. Toggling this menu button then expands the main menu as a vertical list of options and pushes main page content further down.

Requirements for implementations

Note: The following list of requirements is probably incomplete and possibly inaccurate in places. It needs vetting by web designers and testing with different input scenarios, like mobile screen readers and mobile with connected keyboards.

Example 1


(I have asked Bart Simons (anysurfer) who agrees code example here. The example has the menu visible by default, to be toggled by a "hamburger" button. We might modify the example to include a visible label like "open menu" next to the toggle button

Applicable Operating System or Device

The vertical navigation menu is used by many responsive websites to optimise the display in mobile browsers in different mobile OSs (iOS, Android, Windows Phone, Blackberry).




  1. Check that the menu button has a descriptive accessible name that dynamically reflects the toggle state of the menu (e.g. using a DOM inspect tool)
  2. Check that the toggle button can be activated in different interaction modes (keyboard, pointer, touch, touch with activated built-in screen reader)
  3. Check that menu items directly follow the toggle button in terms of focus order
    1. Expected Results