COMPONENTS
Accordion
Alert
Avatar
Badge
Bottom Sheet
Breadcrumb
Button
Card
Chart Editor
Charts
Checkbox
Collapse
Datepicker
Dropdown
Flex Layout
Form
Graph
Grid
Header
Horizontal Scroll
Icon
Inputs & Textarea
Label
Link
List Group
Loading
Menu
Metric
Modal
Pagination
Person
Popover
Progress
Pull to Refresh
Queryfield
Radio
React Grid Layout
Search
Select
Side Panel
Skeleton Loader
Slider
Steps
Switch
Table
Tabs
Tag
Toast
Toolbar
Tooltip
Tree
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