In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Overflow menu

Overflow menu is an element allowing you to display a contextual action list on a mouse click

Usage

Use Overflow menu to provide quick access to actions or sub-sections by hovering or by clicking an element.

Represented by the conventional icon of horizontal three dots, its presence is easily identifiable.

The usability is improved by grouping all available actions into one block, as well as saving space.

Overflow_Menu_usage

Best practices

  • Overflow menu appears on mouse click and disappears when an item is clicked or if the mouse is moved outside the hitbox.
  • The contents of menu expand must be contextual and specific to the element.
  • Always organize the elements of the menu by order of importance or frequency of use.
  • Titles for items must be understandable.
  • The titles must be short and concise.
  • A disabled or unclickable item must be assigned ‘style disabled’.
  • Overflow menu must never hide the elements that trigger it. 

 

Placement

Overflow menu usually appears below the element clicked.

Visual

Appearance

Overflow menu is made up of a list of clickable text elements. Variations with dividers or icon also exist. The container always has a shadow. The present position arrow must always be located below the element before the menu expand. 

 

Behavior

The background of an element grays out when hovered over. 

 

Overflow_Menu_States
Back to top