MenuItem

Menu

Link

Open in Playroom

For use within menu components, e.g. OverflowMenu, MenuRenderer.

Alternatives

MenuItemCheckbox — For displaying checkboxes within a menu.
MenuItemDivider — For creating groups within a menu.

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.

Menu

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.

When icons are provided for only some menu items, it is recommended that you apply the reserveIconSpace prop to the menu to preserve the alignment.

Menu

Open in Playroom

Badge support

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

Menu

Open in Playroom

Braid Logo