Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Menu

The menu component displays a list of actions that can be performed on a resource or within a specific context. Use menu to present multiple related actions in a compact dropdown format, reducing visual clutter while maintaining discoverability.

Menus support action grouping, icons for visual clarity, and keyboard navigation for efficient interaction.

Support
Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Menu component.

Anchor to accessibilityLabel
accessibilityLabel
string

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

Anchor to id
id
string

A unique identifier for the component.

Anchor to onClose
onClose
() => void

Callback to run when the Menu is closed

Anchor to onOpen
onOpen
() => void

Callback to run when the Menu is opened

Anchor to Menu itemMenu item

Configure the following properties on buttons placed inside the menu component.

Anchor to accessibilityLabel
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.

Anchor to accessibilityRole
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.

Anchor to activateAction
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:

ComponentSupported ActionsDefault ('auto')
ClipboardItem'copy''copy'
Anchor to activateTarget
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.

Anchor to appearance
appearance
'critical' | 'monochrome'

Specify the color treatment of the Button.

Anchor to disabled
disabled
boolean
Default: false

Disables the button, disallowing any interaction.

Anchor to id
id
string

A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.

Anchor to loading
loading
boolean
Default: false

Replaces content with a loading indicator.

Anchor to loadingLabel
loadingLabel
string

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

Anchor to onPress
onPress
() => void

Callback that is run when the button is pressed.

Anchor to overlay
overlay
RemoteFragment

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

Anchor to to
to
string

Destination URL to link to.

Anchor to toggles
toggles
string

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

Anchor to submit
submit
boolean

Allows the button to submit a form.

Deprecated

use accessibilityRole="submit" instead

Anchor to ExamplesExamples

Anchor to Add order management actionsAdd order management actions

Display a menu with actions for managing an order. This example shows a Menu triggered by a button overlay, containing actions for submitting a problem, requesting a return, and canceling an order.

Add order management actions

A menu with three actions: Submit problem, Request return, and Cancel order

Add order management actions

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>
);
}
import {Menu, Button, extension} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root, api) => {
renderApp(root, api);
});

async function renderApp(root, api) {
const menuFragment = root.createFragment();
const menu = root.createComponent(Menu, {}, [
root.createComponent(
Button,
{onPress: () => console.log('Submit problem')},
'Submit problem',
),
root.createComponent(Button, {to: 'https://shopify.com'}, 'Request return'),
root.createComponent(Button, {appearance: 'critical'}, 'Cancel order'),
]);
menuFragment.appendChild(menu);
const button = root.createComponent(
Button,
{overlay: menuFragment},
'Manage',
);

root.appendChild(button);
}

Anchor to Add a help menu with link actionsAdd a help menu with link actions

Include an action that navigates to an external page. This example shows a Menu with a button that links to a help center using the to prop.

Add a help menu with link actions

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 to="https://help.shopify.com">
Visit help center
</Button>
<Button
onPress={() =>
console.log('Contact support')
}
>
Contact support
</Button>
</Menu>
}
>
Help
</Button>
);
}
import {Menu, Button, extension} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
renderApp(root);
});

async function renderApp(root) {
const menuFragment = root.createFragment();
const menu = root.createComponent(Menu, {}, [
root.createComponent(
Button,
{to: 'https://help.shopify.com'},
'Visit help center',
),
root.createComponent(
Button,
{onPress: () => console.log('Contact support')},
'Contact support',
),
]);
menuFragment.appendChild(menu);
const button = root.createComponent(
Button,
{overlay: menuFragment},
'Help',
);

root.appendChild(button);
});

Anchor to Add a destructive action to a menuAdd a destructive action to a menu

Highlight a destructive action using the appearance="critical" prop. This example shows a subscription management menu with a cancel action styled as critical.

Add a destructive action to a 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('Skip next order')
}
>
Skip next order
</Button>
<Button
onPress={() =>
console.log('Change frequency')
}
>
Change frequency
</Button>
<Button appearance="critical">
Cancel subscription
</Button>
</Menu>
}
>
Manage subscription
</Button>
);
}
import {Menu, Button, extension} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
renderApp(root);
});

async function renderApp(root) {
const menuFragment = root.createFragment();
const menu = root.createComponent(Menu, {}, [
root.createComponent(
Button,
{onPress: () => console.log('Skip next order')},
'Skip next order',
),
root.createComponent(
Button,
{onPress: () => console.log('Change frequency')},
'Change frequency',
),
root.createComponent(
Button,
{appearance: 'critical'},
'Cancel subscription',
),
]);
menuFragment.appendChild(menu);
const button = root.createComponent(
Button,
{overlay: menuFragment},
'Manage subscription',
);

root.appendChild(button);
});

Anchor to Best practicesBest practices

  • Place menus consistently: Use the menu component in the upper-right corner of full-page extensions, to be consistent with the Order status page.
  • Group related actions: Use menus to consolidate page-level actions, instead of adding multiple buttons around the page.
  • Write concise labels: Use short labels (two words ideally) that start with a verb and use sentence case, such as "Skip order."

Anchor to LimitationsLimitations

  • Menu items must be Button components. Other interactive components aren't supported as direct children.
  • The menu doesn't support nested submenus. All actions must be in a single flat list.
Was this page helpful?