COMPONENTS
Menu
Menus display lists of interactive items. They can be triggered in multiple ways such as hover, click, right click, etc.
Menus can be displayed on top of another surface, and only one menu can be active on a screen at any given time.
- Menu item
- Menu container
- Section heading
- Icon
- Secondary label
- Separator
- Container elevation
Placement of the menu in relation to the trigger can be specified. The menu automatically adjusts to the viewport if no placement is specified.
Menu has four states — hovered, focused, selected and selected with hover.
A menu can be activated via right click on desktop, on hover, or on click or tap.
Menus can contain sub-menus. Having more than two levels is not recommended.
A scrollbar should appear when the number of items extends beyond the height of the menu.
Menus can be displayed in large, medium and small sizes.
When an input is tapped, the screen re-orients automatically so that the menu is centered in the viewport. This ensures that menus do not get cut off by appearing outside of the viewport. Tap off to dismiss
Simple contextual menus can be used.
- Menus should persist until the user has made a selection or clicked outside the menu.
- Menus are self-dismissing. Once a selection has been made it disappears.
Contents