---
title: Menu
description: >-
  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.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/menu
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/menu.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) 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

* Customer​Account::Kitchen​Sink
* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Order actions**: Consolidate order management actions like "Submit problem," "Request return," and "Cancel order" in a popover menu.
* **Subscription management**: Provide subscription actions like "Skip order," "Change frequency," and "Cancel" in a compact menu.
* **Help and support**: Group help-related actions like "Visit help center" and "Contact support" in a menu.

***

## Properties

Configure the following properties on the Menu component.

* **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."

* **id**

  **string**

  A unique identifier for the component.

* **onClose**

  **() => void**

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

* **onOpen**

  **() => void**

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

### Menu item

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

* **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.

* **accessibilityRole**

  **ButtonAccessibilityRole**

  **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 component is activated.

  Supported actions by component:

  | Component | Supported Actions | Default ('auto') |
  | - | - | - |
  | [`ClipboardItem`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/clipboarditem) | 'copy' | 'copy' |

* **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.

* **appearance**

  **'critical' | 'monochrome'**

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

* **disabled**

  **boolean**

  **Default: false**

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

* **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.

* **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.

* **loadingLabel**

  **string**

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

* **onPress**

  **() => void**

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

* **overlay**

  **RemoteFragment**

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

* **to**

  **string**

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

* **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.

* **submit**

  **boolean**

  **deprecated**

  Whether the button submits the nearest containing form when activated.

  **Deprecated:**

  Use `accessibilityRole="submit"` instead.

### ButtonAccessibilityRole

The accessibility role for button-like components. - \`button\`: A generic button that triggers an action. - \`submit\`: A button that submits a form.

```ts
'button' | 'submit'
```

***

## Examples

### Add 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](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/menu-default-Dojdh39I.png)

## Add order management actions

##### React

```tsx
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>
  );
}
```

##### JS

```js
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);
}
```

### Add 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

##### React

```tsx
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>
  );
}
```

##### JS

```js
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);
});
```

### Add 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

##### React

```tsx
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>
  );
}
```

##### JS

```js
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);
});
```

***

## Best 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."

***

## Limitations

* 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.

***