---
title: Migrate to the Polaris menu component
description: >-
  Learn how to migrate the Menu component to Polaris web components in customer
  account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components/menu
  md: >-
    https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components/menu.md
---

# Migrate to the Polaris menu component

The Polaris menu component displays a list of actions in a popover triggered by a button. It replaces the previous [`Menu`](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/components/actions/menu) component and is available as [`<s-menu>`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/menu) in API versions 2025-10 and newer.

The biggest change is how the menu is wired to its trigger. The previous `Menu` was passed to a `Button` through the `overlay` prop. `<s-menu>` is a sibling element that's opened by a trigger button through [`commandFor`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button#properties-propertydetail-commandfor), matching the pattern used for modals and other overlays.

## Migrating Menu to s-menu

##### Latest (Preact)

```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <>
      <s-button commandFor="order-actions-menu">Manage</s-button>
      <s-menu
        id="order-actions-menu"
        accessibilityLabel="Order actions"
      >
        <s-button onClick={() => console.log('Submit problem')}>
          Submit problem
        </s-button>
        <s-button href="https://shopify.com">Request return</s-button>
        <s-button tone="critical">Cancel order</s-button>
      </s-menu>
    </>
  );
}
```

##### Pre-Polaris (2025-07)

```jsx
import {
  Button,
  Menu,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  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>
  );
}
```

***

## Removed properties

### on​Open and on​Close

The previous `Menu` `onOpen` and `onClose` callbacks have been removed.

***

## Further guidance

### Button changes inside the menu

Menu items are now [`<s-button>`](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/actions/button) elements. For the full list of prop changes, see [Migrate to the Polaris button component](https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/button).

***