Skip to main content

Choose a version:

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.

Anchor to menupropsMenuProps

accessibilityLabel

string

A label to describe the purpose of the menu that is announced by screen readers.

id

string

A unique identifier for the component.

onClose

() => void

Callback to run when the Menu is closed

onOpen

() => void

Callback to run when the Menu is opened

Was this section helpful?

Anchor to buttonprops childrenButtonProps children

The Menu component exclusively accepts Button elements with restricted props as its children. The appearance prop will always be set to monochrome by default.

accessibilityLabel

string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

accessibilityRole

Default: 'button'

The role of the button that will be rendered.

button: renders a regular button.

submit: renders a button that submits a form.

activateAction

'auto' | 'copy'

Default: 'auto' - a default action for the target component.

Sets the action the activateTarget should take when this pressable is activated.

Supported actions by component:

Component	Supported Actions	Default ('auto')
`ClipboardItem`	'copy'	'copy'

activateTarget

string

ID of a component that should respond to activations (e.g. clicks) on this pressable.

See activateAction for how to control the behavior of the target.

appearance

Extract<, 'monochrome' | 'critical'>

Specify the color treatment of the Button.

disabled

boolean

Default: false

Disables the button, disallowing any interaction.

id

string

A unique identifier for the component.

loading

boolean

Default: false

Replaces content with a loading indicator.

loadingLabel

string

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.

onPress

() => void

Callback that is run when the button is pressed.

overlay

RemoteFragment

An overlay component to render when the user interacts with the component.

to

string

Destination URL to link to.

toggles

string

The component's identifier whose visibility will be toggled when this component is actioned.

submit

boolean

Allows the button to submit a form.

Deprecated

use accessibilityRole="submit" instead

Was this section helpful?

Basic Menu

import {

reactExtension,

Button,

Menu,

} from '@shopify/ui-extensions-react/customer-account';

import React from 'react';

export default reactExtension(

'customer-account.page.render',

() => <App />,

);

function App() {

return (

<Button

overlay={

<Menu>

<Button

onPress={() =>

console.log('Submit problem')

}

>

Submit problem

</Button>

<Button to="https://shopify.com">

Request return

</Button>

<Button appearance="critical">

Cancel order

</Button>

</Menu>

}

>

Manage

</Button>

);

}

Preview

An example of a Menu with three actions.

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.

Was this section helpful?

Anchor to relatedRelated

ComponentPopover