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

# 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 and keyboard navigation for efficient interaction.

Menu accepts only `s-button` elements as direct children, and doesn't support nested submenus. All actions appear in a single flat list.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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/2026-04/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/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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/2026-04/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/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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/2026-04/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/2026-04/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/2026-04/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 element. Use this to target the element with CSS, JavaScript, or accessibility attributes. The `id` must be unique within the document.

***

## Menu item

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

* **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` target should take when this component is activated.

  * `--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 clipboard item.

  Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).

* **commandFor**

  **string**

  The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).

* **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'`: Submits the nearest containing form.
  * `'button'`: Performs no default action, relying on the `click` event handler for behavior.

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

### CallbackEventListener

A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag.

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

### CallbackEvent

An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

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

***

## Examples

### Add order management actions

Display a menu with actions for managing an order. This example shows an `s-menu` with buttons for submitting a problem, requesting a return, and canceling an order.

## Add order management actions

![A dropdown menu component with a trigger button and list of action items.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/menu-default-xocMFDkv.png)

## html

```html
<s-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>
```

### Organize items into sections

Organize menu items into labeled sections. This example shows an `s-menu` with `s-section` headings separating help resources from support options.

## html

```html
<s-button commandFor="help-menu">
  Help
</s-button>


<s-menu id="help-menu" accessibilityLabel="Help options">
  <s-section heading="Resources">
    <s-button href="https://help.shopify.com" target="_blank">Visit help center</s-button>
    <s-button href="https://community.shopify.com" target="_blank">Community forums</s-button>
  </s-section>
  <s-section heading="Support">
    <s-button>Contact support</s-button>
  </s-section>
</s-menu>
```

### Add a critical action to a menu

Use a menu to group subscription management actions, including a critical action. This example shows a secondary button that opens a menu with actions for managing a subscription.

## html

```html
<s-button
  variant="secondary"
  accessibilityLabel="Subscription actions"
  commandFor="subscription-menu"
>
  Actions
</s-button>


<s-menu id="subscription-menu" accessibilityLabel="Subscription actions">
  <s-button>Skip next order</s-button>
  <s-button>Change frequency</s-button>
  <s-button tone="critical">Cancel subscription</s-button>
</s-menu>
```

***

## Best practices

* **Place menus consistently**: Position menus in the upper-right of full-page extensions to match account pages like order status.
* **Group related 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 labels**: Use short labels that start with a verb and use sentence case, such as "Edit address" or "Cancel order."

***