---
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: 2025-10
api_name: customer-account-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/actions/menu
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/actions/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.

## Properties

* accessibilityLabel

  string

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

* id

  string

  A unique identifier for the element.

## Children button properties

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

* accessibilityLabel

  string

  A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

  Use this when using only an icon or the button text is not enough context for users using assistive technologies.

* click

  ((event: CallbackEventListener\<typeof buttonTagName>) => void) | null

  Callback when the button is activated. This will be called before the action indicated by `type`.

* command

  '--auto' | '--show' | '--hide' | '--toggle' | '--copy'

  Default: '--auto'

  Sets the action the `commandFor` should take when this clickable is activated.

  See the documentation of particular components for the actions they support.

  * `--auto`: a default action for the target component.
  * `--show`: shows the target component.
  * `--hide`: hides the target component.
  * `--toggle`: toggles the target component.
  * `--copy`: copies the target ClipboardItem.

* commandFor

  string

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

  See `command` for how to control the behavior of the target.

* disabled

  boolean

  Default: false

  Disables the button, disallowing any interaction.

* href

  string

  The URL to link to.

  * If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
  * If a `commandFor` is set, the `command` will be executed instead of the navigation.

* id

  string

  A unique identifier for the element.

* loading

  boolean

  Default: false

  Replaces content with a loading indicator.

* target

  'auto' | '\_self' | '\_blank'

  Default: 'auto'

  Specifies where to display the linked URL

* tone

  'auto' | 'neutral' | 'critical'

  Default: 'auto'

  Sets the tone of the Button, based on the intention of the information being conveyed.

* type

  'button' | 'submit'

  Default: 'button'

  The behavior of the button.

  * `'submit'` - Used to indicate the component acts as a submit button, meaning it submits the closest form.
  * `'button'` - Used to indicate the component acts as a button, meaning it has no default action.
  * `'reset'` - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).

  This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.

### CallbackEventListener

```ts
(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null
```

### CallbackEvent

```ts
TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}
```

### Examples

* #### Code

  ##### Default

  ```jsx
  <>
    <s-button commandFor="order-actions-menu">
      Manage
    </s-button>

    <s-menu
      id="order-actions-menu"
      accessibilityLabel="List of order actions"
    >
      <s-button>Submit problem</s-button>
      <s-button>Request return</s-button>
      <s-button tone="critical">Cancel order</s-button>
    </s-menu>
  </>
  ```

## Preview

![An example of a Menu component shows three actions: Submit problem, Request return, and Cancel order.](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/menu-default.png)

## Best practices

Use these best practices to deliver a clear and accessible experience in your extensions.

### Place menus consistently

Position menus in the upper‑right of full‑page extensions to match account pages like order status.

### Group page‑level actions

Keep related actions in a single menu rather than scattering buttons across the page.

### Limit items to what’s relevant

Include only actions that matter for the current page to reduce decision fatigue.

### Order by frequency and risk

List the most common or least risky actions at the top so they’re easy to reach.

### Write concise, action‑first labels

Use short labels (ideally two words) that start with a verb, use sentence case, avoid filler articles, and clearly state the outcome.

## Related

[Component - Popover](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/overlays/popover)