Menus allow users to make a selection from a list of options. We use two types of menus: Dropdown and Filter.
Allow users to discover and access complex actions. They can be generated from buttons, icons, and in some cases by right-clicking a location.
Filter menus allow users to filter information by selecting from a long list of options. They can be generated by clicking a text field.
- Menu options can be user-generated text
- Menu text is 2-3 words by default
- Menu option text may have a disabled style
Minimize text and rely on interface clarity
Write repetitive menu option text
- Menus appear above all other UI elements
- Menus appear directly below the element that generated it
- Menus do not move from their original location when scrolling through the page
- Menus should never touch the edge of the browser screen. Apply an offset of 8px.
- Menus can contain icons
- Menus can have dividers to group relevant options together
- By default only one menu item can be selected at a time
- Multiple menu options can be selected in special cases
Use iconography as a visual aid for important actions
Use repetitive iconography in filter menus
- Min width: 128px
- Menu elevation: 4dp
Option text color:
Option text hover color:
- Width: matches the width of the longest text option
- Menu option height: 32px
- Width: width: matches the width of the text field that generates it
- Menu option height: 48px