Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 06:45, 7 May 2012 by hamishwillee (Talk | contribs)

Mobile Web Design : Menu

From Wiki
Jump to: navigation, search
Article Metadata
Created: mayankkedia (29 Jun 2009)
Last edited: hamishwillee (07 May 2012)

This design pattern is part of the Mobile Web Design series.



The menu layout on a web page plays an important role in the overall user interface layout. The menu pattern used should be in sync with the display constrains of the device, and depending upon the context, the menu layout should be used.

In this article we will discuss a couple of menu patterns which could be useful for designing mobile web pages:-

Overlay Menu

A menu which gets displayed at the location where the user presses the touch screen. Once the user selects a particular item from the menu or pressing the touch screen again, the menu goes away, allowing the user to browse the website normally.

Overlay Menu In Image
Overlay Menu In Image

Use when

When the overall navigation pattern of the site is not complex and the level of menu items is not nested, this menu pattern can be used to give the site a jazzy look so to speak.

This menu pattern also makes a lot of sense in cases of a product catalogue, map locator kind of websites, where depending upon the position at which the pointer has been clicked, the menu can be popped up pertaining to the specific item that is present at those co-ordinates. Say in case of an apparel website, the user can chose from a variety of offerings like tuxedo, jeans, trousers etc, depending on the pointer click location, the menu popped up can have specific information regarding tuxedos for example and so on.


Some of the limitations/drawbacks of this menu pattern are:-

  1. Not very user friendly in case of non touch screen devices as the user might find it tough to position the click event at the exact co-ordinates.
  2. The navigation through the drop down kind of menu that pops up in place might be a slightly cumbersome task for the end user.
  3. The in place menu might block the information being displayed below the pop-out menu causing usability concerns.

Retractable Menu

A menu which expands/collapses depending upon on the user click is available to be accessed again at a later point in time. This menu makes a lot of sense where the display area is limited and the user wants to use that to view the remainder of the webpage.

Use when

Where the display area is limited, but at the same times the user wants to be able to use the menu options as and when they require. When the user presses the retractable menu it either expands horizontally or vertically depending on the design of the webpage and the amount of information tat needs to be displayed.

Retractable menu in image
Retractable menu in image

Retractable menu 10.JPG

More details on this menu pattern can be had from:

Dynamic Drive

Accordion Menu

Additional details on accordion menu can be had from:

Mobile Design Pattern: Accordion Menu

Teaser Menu

Additional details on teaser menu can be had from:

Mobile Design Pattern: Teaser Menu

Icon Menu

Additional details on icon menu can be had from:

Icon Menu


Dynamic Drive

--- Added by Mayank on 29/06/2009 ---

44 page views in the last 30 days.