Mobile - Fixed Menu

Problem

You have to provide access to options or controls across the application, but a Revealable Menu is already in use, or would be unsuitable due to lack of controls or conflicts with other key interactions. Often the OS will dictate the general style of the menu structure. There is usually much leeway in implementation if necessary or desired.

Solution

An always-visible menu or control set is docked to one edge of the viewport. Any time your users require immediate action, a fixed menu is a good solution.

should use this pattern only if it is applied across the entire OS or an entire application. Playback controls for a video player, which are the same in all modes of the application, are a fixed menu.

Variations

Use the fixed menu to display a simple list of available options. These are generally displayed as a horizontal bar, so usually you should display each option as an individual icon, each associated with a text label.

These may be used as the primary menu structure, but are often used in concert with a Revealable Menu.

Fixed Menus are used for touch and pen devices, or used when the page content does not have to be interacted with directly, for example, with video playback; the controls are the primary interaction method.

Fixed Menus are not contained in a modal dialog, so you can offer interaction with the content of the entire page.

If you must place more items in a menu that can fit in the main menu, a subsidiary menu will be opened. This is typically a popup dialog with a Vertical List. When practical, you may draw this as a Thumbnail List, where the thumbnails are also icons.

The main menu should always be locked to the viewport, preventing it from scrolling off the screen. Do not allow scroll bars to overlap the menu.

The menu is present on all screens and states of an application, but may be hidden temporarily for media playback, or to give more room to the primary content.

Antipatterns

If hiding is routinely employed to gather on-screen space taken up by a Fixed Menu, reconsider using this pattern; it's likely that a Revealable menu is more suited for the need.

Carefully consider the importance of consistency across the interface and the OS.

Do not stack multiple Fixed Menus on top of one another. Avoid having mixed menus adjacent to other interactive bars of the same shape, such as a Notifications area.

Examples