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>
Menu props
| Property | Type |
|---|---|
| Required
One or more MenuGroup or MenuItem components. |
| Optional
Handler that is called when an item is selected. |
| Optional
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>
MenuItem props
| Property | Type |
|---|---|
| Required
The contents of the component. |
| Optional
Marks an item as disabled. Disabled items cannot be selected, focused, or otherwise interacted with. |
| Optional
The id of the item. This will be passed into the |
| Optional
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>
MenuGroup props
| Property | Type |
|---|---|
| Required
One or more MenuItem components. |
| Optional
|
Events
Use the onAction prop as a callback to handle press events on items. You can provide 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>