Select Menu

Problem

On small screens, an extensive menu can fill the entire page. However, if you have a menu that has to work simultaneously on wide screens and on mobile devices, you want that menu to be as efficient as possible regarding the use of vertical space.

Solution

Present the navigation on a menu that on narrow screen devices dynamically changes to a native select component.

This pattern is useful for designing a navigation menu with numerous and lengthy items that needs to work simultaneously on the mobile and desktop version. In the desktop version of the website the menu is presented expanded, on a narrow screen it is converted through JavaScript to the native select component. Thus, this pattern is normally seen in websites that implement a responsive design.

This type of menu can be a practical alternative for when vertical space is scarce and you want to display the menu on top of the page. However, it is not the most elegant of the alternatives, because it adds another layer of information with a distinctive interface. A more clean and elegant approach in terms of visual design can be achieved through the TOGGLE MENU pattern, which uses a comparable type of interaction but with a custom interface.

This type of menu is easier to recognize as something selectable because it uses the native controls of each device. Likewise, because it uses controls that are optimized for the respective device, you can be confident that it will work and be accessible in most of them. Though, as a downside, because it uses the native browser components, it is very difficult to achieve a consistent look across platforms (Figure 1).

Web Design Patterns for Mobile DevicesWeb Design Patterns for Mobile Devices

Figure 1. Screenshots from the same SELECT MENU at Smashing Magazine website on different platforms. iOS on the left, Android on the right.

You can also work with subitems, though, that can be even more confusing. In Figure 1 subitems are denoted by an indent, but dashes are also a common alternative.

***

Web Design Patterns for Mobile Devices
Smashing Magazine, 04/2012
Web Design Patterns for Mobile Devices
Lancaster University, 04/2012
Web Design Patterns for Mobile Devices
Wordlskills London 2011, 04/2012
  1. http://tinynav.viljamis.com
  2. https://github.com/samuelcotterall/touchdown
  3. http://bradfrostweb.com/blog/web/responsive-nav-patterns/#select
  4. http://www.stuffandnonsense.co.uk/blog/about/the_select_menu_navigation_pattern