Mobile Menus

Contact Us or call 1-877-932-8228
Mobile Menus

Mobile Menus

Desktop views of web pages typically present navigation elements in horizontal or vertical fashion. It's something with which we've become quite familiar: a horizontal bar, say, of seven or so items - "About Us", "Products", "Services", etc. - spans the width of the page underneath the main logo and shows drop-down elements when moused over. Perhaps another smaller horizontal nav menu ("News", "Contact", etc.) sits at the top of the page. These nav bars give visitors to the site a useful means of finding desired content.

A mobile view of the same content still needs to present these way-finding elements but now, of course, we have less screen real estate with which to work. A seven- or eight-across horizontal nav bar won't work quite as well, since each individual nav element would need to be proportionally smaller and might, as a result, be too small to read and too small to tap.

With the explosion of the use of mobile devices to access the web in recent years, we've seen some standardization in how navigation elements are presented. Perhaps the most common is to collapse the horizontal nav bar into a single "menu" icon - often displayed as three horizontal bars - on which the user can tap to toggle the menu.

Let's look at an example. Alistapart.com, the popular web magazine which "explores the design, development, and meaning of web content, with a special focus on web standards and best practices", presents desktop visitors with a horizontal navigation menu at the very top of the page, somewhat (in a "designy" fashion) obscuring the site's logo:

Alistapart Navigation Menu

Mobile viewers see the same semi-transparent white horizontal bar at top. However, the menu is now collapsed; users can toggle the menu by tapping the three-horizontal-bar icon at upper left. Here are two views of the mobile style of the site, with the left view showing the initial state and the right view showing the menu expanded, after the user has tapped the menu icon:

Two Views of Mobile Navigation Menu

A variety of design patterns have, in recent years, emerged as useful ways to handle delivering navigation elements to mobile users: toggling a menu (like the alistapart.com example above), toggling a menu affixed to the footer, sliding out a menu from the side, etc. How you decide to design your menu is, of course, up to you and depends on the specifics of your site's design, audience, and goals.

Next