BRAID
Braid Logo
 

MenuItem

Open in Playroom
For use within menu components, e.g. OverflowMenu, MenuRenderer.

Alternatives

Accessibility

Follows the WAI-ARIA Menu Pattern.

Semantic variants

You can choose between semantic links and buttons via the following components:
  • MenuItem which renders a button.
  • MenuItemLink which renders a link, using the linkComponent implementation from BraidProvider.
All semantic variants can be used interchangeably within a single menu.

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

Inserting an icon

For decoration and help distinguishing between menu items, an icon can be provided. This will be placed to the left of the text.
Open in Playroom

Badge support

Add a Badge alongside the label of the menu item using the badge prop.
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<MenuItem
  data={{ testid: 'menu-item-1' }}
  // => data-testid="menu-item-1"
>
  ...
</MenuItem>
Open in Playroom