Open in Playroom
This component allows you to attach standard menu interactions to a custom trigger element, e.g. OverflowMenu uses this internally. This should only be used if standard alternatives aren’t suitable.
  • OverflowMenu For displaying a list of secondary actions.
The menu is left-aligned by default, but this can be customised via the align prop.
Open in Playroom
The menu is placed below the trigger by default, but this can be customised via the placement prop.
Open in Playroom
The space between the menu and the trigger element can be customised via the offsetSpace prop, which also accepts responsive values, e.g. offsetSpace={{ mobile: 'xsmall', tablet: 'small' }}
Open in Playroom
The width prop can be used to control the width of the menu. By default, it is set to content growing to the length of the longest menu item.Alternatively, choose from small, medium or large which are ratios of the contentWidth scale for the selected theme.
Open in Playroom
For destructive actions like “Delete” you can set the menu item’s tone to critical. When using this feature, you may want to consider providing a confirmation via a Dialog.
Open in Playroom
When using menu items with icons, you may find that not all of them have or need one. In order to maintain a uniform alignment across all the menu items, you can provide the reserveIconSpace prop.
Open in Playroom
The menu accepts both an onOpen and an onClose function.
The onClose function receives the following data:
  • reason: “exit” or “selection”
  • index: the index of the selected menu item
  • id: the id of the selected menu item as provided to the MenuItem component itself.
Open in Playroom
The trigger element must accept generic DOM properties including event handlers and aria properties.Child nodes must be MenuItem, MenuItemCheckbox or MenuItemDivider elements.