Menu displays a list of additional actions available to the user, which is helpful to use when there is a space constraint.
It has two variants; a standard menu referred to as “Custom Menu” with dropdown, and a smaller “Simple” menu represented by three vertical dots, also known as an overflow menu.
Custom
Simple
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Button |
Button to open MenuList (dropdown). Example shown is the Custom variant. The Simple variant has an icon-only Button. |
No |
|
2. MenuList |
List of actions. |
No |
|
3. MenuItem |
An individual action. |
No |
|
4. Label |
A few words or less to describe the action the user can take. |
No |
|
5. Description |
Additional information to support the label, such as an explanation of the terminology. |
Yes |
|
6. Error |
Error state for a MenuItem. |
Yes |
|
7. Informational item |
Additional element if required, like an Avatar. |
Yes |
|
8. Switch |
Switch to toggle an item on or off. |
Yes |
|
9. Link |
Link to an internal or external page. |
Yes |
|
10. Bottom border |
Visual separator between individual MenuItems. |
Yes |
|
11. NestedMenu |
caretRight icon indicates a nested Menu with one or more additional actions, which appear to the right of the original Menu. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| type Variant | custom | simple | custom |
Component dependencies
This component is internally dependent on the following sub-components:
It’s also dependent on:
Help and support