Menu
Use a menu to display a list of actions in a popover. Actions can open a modal, trigger an event, or link to an external page.
A label to describe the purpose of the menu that is announced by screen readers.
A unique identifier for the component.
Callback to run when the Menu is closed
Callback to run when the Menu is opened
The Menu component exclusively accepts Button elements with restricted props as its children. The appearance
prop will always be set to monochrome by default.
A label used for buyers using assistive technologies. When set, any children
supplied to this component will not be announced to screen reader users.
The role of the button that will be rendered.
button
: renders a regular button.
submit
: renders a button that submits a form.
ID of a component that should respond to activations (e.g. clicks) on this pressable.
See for how to control the behavior of the target.
Specify the color treatment of the Button.
Disables the button, disallowing any interaction.
A unique identifier for the component.
Replaces content with a loading indicator.
Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading
is true.
Callback that is run when the button is pressed.
An overlay component to render when the user interacts with the component.
Destination URL to link to.
The component's identifier whose visibility will be toggled when this component is actioned.
Allows the button to submit a form.
use instead
Basic Menu
Preview

Anchor to best-practicesBest Practices
Consolidate actions into one menu
- Use the menu component in the upper-right corner of full-page extensions, to be consistent with the Order status page.
- Use menus to consolidate page-level actions, instead of adding multiple buttons around the page.
Content guidelines
When writing button labels:
- Aim for 2 words (verb and noun).
- Lead with a strong verb that encourages action.
- Avoid unnecessary words and articles such as “the,” “an,” or “a.”
- Use sentence case.