Toggle Menu

Problem

You have and extensive LINEARIZE MENU that takes the entire screen, and a JUMP MENU is not a proper alternative because it displaces the menu to the bottom of the page. You want to display the menu on the top of the page but do not want it to fill the entire screen.

Solution

Design the menu content as a LINEARIZED MENU but conceal it, then provide a button to toggle the visibility of the menu.

In the TOGGLE MENU we have a LINEARIZED MENU that is presented collapsed when the page loads until there is a direct action of the user to expand it. This allows us to display only a small button on top of the page to toggle the visibility of the menu. With this approach we can present the content first while still providing quick access to the navigation.

This pattern is somehow similar to the SELECT MENU in that, a link to the navigation is presented in the top of the site, and the navigation is only disclosed when there is a direct instruction of the user. The main difference between both is that the SELECT MENU uses the native select menu component of the device while this pattern uses a custom interface.

Web Design Patterns for Mobile Devices

Figure 1. A possible toggle icon.

For the element which triggers the menu you can use any symbol that provides the correct affordance that additional information will be disclosed. Nonetheless, many websites use an icon with three horizontal bars, which represent the list items of a menu (Figure 1). When the menu is active you can change the icon to show that the menu state has changed. For example, the Starbucks website changes the icon to an “x” when the menu is expanded. Andy Clarke1 incites the need to reach a consensus on a standard icon for showing navigation, settling his support for the three lines because they are widely used and therefore, easily recognized, unless your navigation is arranged on a grid, which, in that case you should use a grid icon. In short, the symbol used should map the layout of the menu.

Web Design Patterns for Mobile Devices

Figure 2. Filament Group approach to this pattern uses the toggle button to display the title of the current page.

If you have enough horizontal space you can improve the usability of this pattern by appending the title of the current page to the toggle icon (Figure 2). This allows us to give feedback of the user’s position in the site hierarchy and provide a larger target.

***

Web Design Patterns for Mobile Devices
Starbucks, 04/2012
Web Design Patterns for Mobile Devices
Twitter bootstrap, 04/2012
Web Design Patterns for Mobile Devices
BBC News mobile website, 04/2012
Web Design Patterns for Mobile Devices
Filament Group, 04/2012
Web Design Patterns for Mobile Devices
NFL mobile, 04/2012
Web Design Patterns for Mobile Devices
Nathan Sawaya, 04/2012