Overflow Menu
An overflow menu is a UI component that houses secondary options or actions.
- Overview
- Specs
- Guidelines
Component
The Overflow Menu allows you to provide the user with a set of additional actions when carrying out a task.
The Overflow Menu icon indicates that more options are available. Clicking it reveals a dropdown with additional options or actions.
A: Borderless Overflow Menu
B: Overflow Menu with borders
1: Drop-down
2: Action/option icon
3: Action/option label
4: Divider
Used for:
Less important actions
For additional and less important actions such as “List” and “Duplicate”, the Overflow Menu prevents the design from becoming too “crowded”;
Destructive actions
As destructive actions must not be clicked on unintentionally, it is recommended to display the “delete” option in an Overflow Menu;
Complex interfaces
In interfaces and products with multiple functions in the same view, it’s recommended to use an Overflow Menu;
Contextual actions
In cases where certain actions are available under specific conditions for certain views, the Overflow Menu must be used;
Consistent navigation
To maintain consistency in certain component patterns, the Overflow Menu serves as a standard location for secondary actions across the product;
Don’t use for:
Frequently used actions
For frequently used actions, such as “Save”, it’s best to prioritize the action within the main actions, often represented as a button;
Minimal actions
When the view has only a few actions or options that can fit without cluttering the interface, an Overflow Menu may not be necessary;
Consistent visibility
In interfaces where maintaining consistent visibility of all actions is crucial for user engagement or task completion, hiding actions behind an Overflow Menu may hinder user interaction and lead to reduced usability;
Limited user control
If users expect to have direct control over all available actions without needing to navigate through menus, an Overflow Menu might limit their control of the interface.
Demo
Access the Figma file and inspect element using Dev Mode.
Last Update
- Added border version;
- Added divider for dropdown options;
