Documentation Index
Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
Use this file to discover all available pages before exploring further.
Menu
v1.0.0 | View in Storybook Context menus are triggered by right-clicking or long-pressing on an element. They appear as a list of options related to the element that was right-clicked or long-pressed. Dropdown menus are triggered by clicking a Button or Select. They appear as a list of options related to the Button or Select that was clicked.When to use
- Providing a list of choices or actions for the user to choose from.
- Creating a dropdown menu from a Button, Select, Combobox or other element where it makes sense to reveal more options to the user.
- There are additional options to display but space is limited.
- To provide more contextual options from right-clicking, but don’t have space to display a trigger element such as a Button or Toolbar.
When to use something else
- Interactions need reordering, rich rows, or descriptions that Menu items can’t carry: use Select panel.
- The user must confirm a destructive or high-stakes action: use Dialog or Alert dialog; lightweight contextual panels may use Popover.
Dos and don’ts
- Do use consistent menu item types for each section of the menu, e.g., if one menu item uses an icon, all menu items in that section should use an icon. If one menu item uses a toggle, all menu items in that section should be toggleable.
- Do keep menu items left aligned.
- Don’t mix menu items that allow for leading content (icon or toggle) with menu items that do not allow for leading content. Separate action menu items into sections based on context to improve discoverability. Use section labels to help users understand the categories.
Behavior & placement
- When users choose a menu item, the action occurs and the menu typically closes, unless the user can select multiple items at once, in which case the Menu should remain open.
- A Menu can be positioned above, below, right or left of the trigger element depending on the available space and layout. There should always be a 4px gap between the trigger element and Menu. If the Menu is activated by right-clicking then it should appear relatively close to where the right-click occurred.
- Mouse hover over a submenu item will open the submenu.
- When positioned above or below the trigger, the Menu should either be left or right aligned with the trigger depending on where it is in the viewport.
- When positioned to the left or right of the trigger, the Menu should either be bottom or top aligned with the trigger depending on where it is in the viewport.
- Menus that are triggered by an overflow (ellipsis) icon Button should always be positioned in a way that follows the direction of the ellipsis. By default we use the vertical ellipsis icon, in which case Menus should open above or below the Button. However, if the Menu will open to the left or right of the icon Button, a horizontal ellipsis icon should be used.