Menu
A menu presents a group of actions that a user can choose from, often related to a particular object or context.
To add the Menu
component to your app:
import {Menu, MenuItem, MenuGroup} from '@stripe/ui-extension-sdk/ui';
A basic menu is made up of an element to trigger the menu, and a series of MenuItems.
<Menu trigger={<Button>Menu</Button>}> <MenuItem>Edit</MenuItem> <MenuItem>Copy</MenuItem> <MenuItem>Paste</MenuItem> </Menu>
Props
Prop | Type | Description |
---|---|---|
onAction |
| Handler that is called when an item is selected. |
trigger |
| The trigger Element to show/hide the menu. Must be a component that supports press events, such as a Button or Link. |
Items
Menus contain multiple vertically arranged items.
<Menu aria-label="Menu"> <MenuItem>Edit</MenuItem> <MenuItem disabled>Copy</MenuItem> <MenuItem>Paste</MenuItem> </Menu>
Props
Prop | Type | Description |
---|---|---|
aria-label |
| An accessibility label for this item. |
disabled |
| Marks an item as disabled. Disabled items cannot be selected, focused, or otherwise interacted with. |
id |
| The id of the item. This will be passed into the `onAction` handler of `Menu` |
onAction |
| Handler that is called when an item is selected. |
Groups
You can divide items in a menu into groups.
<Menu aria-label="Menu"> <MenuGroup title="Actions"> <MenuItem>Duplicate</MenuItem> <MenuItem>Edit</MenuItem> <MenuItem>Cancel</MenuItem> </MenuGroup> <MenuGroup title="Connections"> <MenuItem>View customer</MenuItem> <MenuItem>View subscription</MenuItem> </MenuGroup> </Menu>
Props
Prop | Type | Description |
---|---|---|
aria-label |
| An accessibility label for the group. |
title |
| A heading grouping the menu items. |
Events
Use the onAction
prop as a callback to handle press
events on items. You can provde the onAction
prop to the Menu
to handle item activation across all items, or to the MenuItem
directly to handle activation for individual items.
<Menu aria-label="Menu" onAction={(id) => console.log(`Item ${id} was pressed.`)} > <MenuGroup title="Actions"> <MenuItem id="duplicate">Duplicate</MenuItem> <MenuItem id="edit">Edit</MenuItem> <MenuItem id="cancel">Cancel</MenuItem> </MenuGroup> <MenuGroup title="Connections"> <MenuItem id="View customer" onAction={() => console.log(`View customer was pressed.`)} > View customer </MenuItem> <MenuItem id="View subscription">View subscription</MenuItem> </MenuGroup> </Menu>
Triggers
The menu trigger
property works together with the menu to link the menu’s open state with a trigger’s pressed state.
<Menu trigger={<Button>Menu</Button>}> <MenuGroup title="Actions"> <MenuItem>Duplicate</MenuItem> <MenuItem disabled>Edit</MenuItem> <MenuItem>Cancel</MenuItem> </MenuGroup> <MenuGroup title="Connections"> <MenuItem>View customer</MenuItem> <MenuItem>View subscription</MenuItem> </MenuGroup> </Menu>