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.
The menu is placed below the trigger by default, but this can be customised via the placement prop.
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' }}
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.
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.
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.
The trigger element must accept generic DOM properties including event handlers and aria properties.
Child nodes must be MenuItem, MenuItemCheckbox or MenuItemDivider elements.