Menu
What is this?
Menu triggers allow merchants to open a dropdown and start contextual actions that are rarely used or repeated for each item in a list.
Composition
Name | Description |
---|---|
MenuButton | Button that triggers the menu popover |
Menu | Menu's popover |
MenuItem | Represents a button rendered inside the MenuList |
MenuDivider | Represents an hr used to separate the menu popover into sections |
Variants
MenuButton has four possible variants: primary
, secondary
, tertiary
and neutralTertiary
. Primary is the default variant.
Sizes
MenuButton has two possible sizes: normal
and large
. Normal is the default size.
Icon only
You can use the labelHidden
property to hide the MenuButton label
Custom
It possible to use the label
MenuButton property to set the button text. When a custom label is used, the icon changes to the IconCaretDown/Up.
Disabled
Disable the MenuButton by setting the disabled
property to true.
Bleed
MenuButton can trespass the parent padding for some alignment and layout reasons, it is possible to achieve this behavior through the bleedX
and bleedY
property.
Item
MenuItem has two possible variants: neutral and critical, to enable the critical variant, the critical
property needs to be true.
Item click
It is possible to set a custom action when a item is clicked.
Item disabled
Disable the MenuItem by setting the disabled
property to true.