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.
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.
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.
