BRAID
Braid Logo
 

MenuRenderer

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.

Alternatives

  • OverflowMenu — For displaying a list of secondary actions.

Accessibility

Follows the WAI-ARIA Menu Pattern.

Alignment

The menu is left-aligned by default, but this can be customised via the align prop.
Open in Playroom

Placement

The menu is placed below the trigger by default, but this can be customised via the placement prop.
Open in Playroom

Spacing

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

Width

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

Destructive actions

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

Using icons in the menu

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

Menu interactions

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

Development considerations

The trigger element must accept generic DOM properties including event handlers and aria properties.
Child nodes must be MenuItem, MenuItemCheckbox or MenuItemDivider elements.