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

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

## MenuProps

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

## ButtonProps 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**

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

  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\<Appearance, '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**

  **deprecated**

  Allows the button to submit a form.

  **Deprecated:**

  use `accessibilityRole="submit"` instead

### ButtonAccessibilityRole

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

### Appearance

```ts
'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
```

Examples

## Preview

![An example of a Menu with three actions.](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2024-10/menu-default-Dojdh39I.png)

### Examples

* #### Basic 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('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);
  }
  ```

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

![The “Don’t do” example shows 3 separate action buttons on a subscription page. The “Do” example shows the same 3 actions consolidated into one menu.](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2024-10/menu-dont-do-CjklWj-f.png)

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

![A button that follows the content guidelines says “Skip order”. A button that does not meet the content guidelines says “Skip this order”.](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2024-10/menu-labels-D7A0Sy6x.png)

## Related

[Component - Popover](../../../checkout-ui-extensions/unstable/components/overlays/popover)