Skip to content

Components - Menus

Menus display a list of choices on a transient sheet of material.

  • Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.
  • Menu items may be disabled if not applicable to a certain context. Contextual menus dynamically change their available menu items based on the current state of the app.

Usage

A menu is a temporary piece of material that appears upon interaction with a button, action, pointer, or other control. It contains at least two menu items.

Each menu item consists of a discrete option or action that can affect the app, the view, or selected elements within a view.

Menus should not be used as a primary method for navigation within an app.

  • The label of a button or control should concisely and accurately reflect the items within the menu.
  • Menu bars typically use single words as labels, like “file,” “format,” and “edit.” Other contexts may require longer labels.

Disabled menu options

  • Menus display a consistent set of menu items.
  • A menu item may be enabled or disabled based on the current state of the application.

Contextual menus

Contextual menus dynamically change their available menu items based on the current state of the application.

  • Menu items that are irrelevant to the current context may be removed.

Single menu-item states

Some app states may result in a contextual menu with only a single menu item. For example, when highlighting text on a web page, Android display only the Copy menu item, as users cannot cut or paste text.

If the height of a menu prevents all menu items from being displayed, the menu can scroll internally.

Cascading menus (Desktop only)

For menus that cascade, position the menus vertically and horizontally based on their proximity to screen edges.

Single-line display

Each menu item is limited to a single line of text (a single word or short phrase) that describes the action it will perform when selected.

Menu items may also contain:

  • Icons and helper text, like keyboard shortcuts.
  • Controls like checkmarks to indicate multiple selected items or states.

Menus with static content should have the most frequently used menu items placed at the top of the menu. Menus with dynamic content may have other behavior, such as placing previously used fonts at the top of the menu. The order can change based on user actions.

Menu items can reveal nested submenus. Ideally, limit nesting to one level deep, as it can be difficult to navigate multiple nested submenus.

Disabled actions

Displaying actions as disabled, rather than removing them, lets the user know they exist under the right conditions.

Ex: Redo is disabled when there is nothing to redo. Cut and Copy are disabled until content is selected.

Behaviour :

Location :

  • Menus appear above all other in-app UI elements.
  • Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element.
  • Do not display a duplicate of the selected menu item.
  • Positioning the menu below the emitting element separates it from its context.

Dismissing menus

  • Dismiss a menu by tapping outside of the menu, or by tapping the emitting button (if visible).
  • Selecting a menu item should also dismiss the menu. An exception is when a menu allows for multiple items to be chosen, for example, by using checkmarks.

Simple Menus :

Mobile or tablet

Use simple menus in lists to display the options for a specific list item.

Vertical alignment

When close to a screen edge, simple menus vertically realign to make all menu items are completely visible.

Item selection

Choosing an option immediately commits the option and closes the menu.

Cancelling selection

Touching outside of the menu, or pressing the system Back button, cancels the action and closes the menu.

  • When opened, simple menus attempt to vertically align the currently selected menu item with the list item. The currently selected menu item is highlighted.
  • Do not arbitrarily position the first menu item over the list item.
  • When close to a screen edge, simple menus reposition their vertical alignment so that all menu items are completely visible.
  • Simple menus appear over their emitting element, not below.
  • Menu width varies depending on string length, and on mobile is defined as a multiple of a 56dp unit.
  • Simple menus always maintain a 16dp margin (phone) or 24dp margin (tablet) to the left and right edges of the screen.
  • If text in a simple menu wraps to a second line, use a simple dialog instead. Simple dialogs can have rows with varying heights.
  • Menus show a persistent scroll bar when content is scrollable.
  • Don’t duplicate the selected menu item.
  • Simple menus are always left-aligned with the start of the list item text and do not reposition horizontally based on the touch location.

Specs

For Specs of Different Menus in mobile & desktop Click Here.