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 that describes the purpose of the menu for users of assistive technologies such as screen readers. Use this to provide context about the available actions, such as "Order actions" or "Account settings."

Anchor to id
id
string

A unique identifier for the component.

Anchor to onClose
onClose
() => void

Callback that fires when the menu is closed. Use this to perform cleanup or reset state when the menu is dismissed.

Anchor to onOpen
onOpen
() => void

Callback that fires when the menu is opened. Use this to perform setup or fetch data when the menu becomes visible.

Anchor to Menu itemMenu item

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

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose or content of the button for users of assistive technologies such as screen readers. When set, any children supplied to this component won't 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 component is activated.

Supported actions by component:

ComponentSupported ActionsDefault ('auto')
ClipboardItem'copy''copy'
Anchor to activateTarget
activateTarget
string

The ID of the component to control when this component is activated. Pair with the activateAction property to specify what action to perform on the target component.

Anchor to appearance
appearance
'critical' | 'monochrome'

The semantic meaning and color treatment of the button, such as 'critical' for destructive actions or 'monochrome' for a neutral appearance.

Anchor to disabled
disabled
boolean
Default: false

Whether the button is disabled, preventing it from being activated or receiving focus.

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

Whether the button is in a loading state, which replaces the button content with a loading indicator while a background action is being performed. This also disables the button.

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

A callback fired when the button is activated by the user.

Anchor to overlay
overlay
RemoteFragment

An overlay component to render when the user interacts with the component, such as a popover, modal, or tooltip.

Anchor to to
to
string

The URL to navigate to when the button is activated. The onPress callback fires first, then navigation occurs.

Anchor to toggles
toggles
string

The ID of the component whose visibility will be toggled when this component is activated. Use this to show or hide related content like a disclosure panel.

Anchor to submit
submit
boolean

Whether the button submits the nearest containing form when activated.

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?