---
title: Migrate ActionMenu from Polaris React
description: >-
  Learn how to migrate the Polaris React ActionMenu component to Polaris web
  component page actions and menus.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/action-menu
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/action-menu.md
api_name: app-home
---

# Migrate Action​Menu from Polaris React

Polaris React `ActionMenu` combines visible page-level secondary actions, grouped menus, and responsive rollup behavior. In Polaris web components, place important page actions in [`s-page` action slots](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/page) and use [`s-menu`](https://shopify.dev/docs/api/app-home/web-components/actions/menu) for grouped or overflow actions.

Don't move every action into a menu. Keep frequent and important actions visible, and reserve menus for secondary contextual actions.

## Migrating ActionMenu

##### Polaris web components

```tsx
export function ProductPageActions({
  onExport,
  onDuplicate,
  onArchive,
  onDelete,
}) {
  return (
    <s-page heading="Product">
      <s-button slot="secondary-actions" icon="export" onClick={onExport}>
        Export
      </s-button>
      <s-button slot="secondary-actions" commandFor="product-actions">
        More actions
      </s-button>
      <s-menu id="product-actions" accessibilityLabel="Product actions">
        <s-button icon="duplicate" onClick={onDuplicate}>
          Duplicate
        </s-button>
        <s-button icon="archive" onClick={onArchive}>
          Archive
        </s-button>
        <s-button icon="delete" tone="critical" onClick={onDelete}>
          Delete
        </s-button>
      </s-menu>
      <s-section>
        <s-text>Product details</s-text>
      </s-section>
    </s-page>
  );
}
```

##### Polaris React

```tsx
import {Card, Page, Text} from '@shopify/polaris';
import {
  ArchiveIcon,
  DeleteIcon,
  DuplicateIcon,
  ExportIcon,
} from '@shopify/polaris-icons';

export function ProductPageActions({
  onExport,
  onDuplicate,
  onArchive,
  onDelete,
}) {
  return (
    <Page
      title="Product"
      secondaryActions={[
          {
            content: 'Export',
            icon: ExportIcon,
            onAction: onExport,
          },
      ]}
      actionGroups={[
          {
            title: 'More actions',
            actions: [
              {
                content: 'Duplicate',
                icon: DuplicateIcon,
                onAction: onDuplicate,
              },
              {
                content: 'Archive',
                icon: ArchiveIcon,
                onAction: onArchive,
              },
              {
                content: 'Delete',
                icon: DeleteIcon,
                destructive: true,
                onAction: onDelete,
              },
            ],
          },
      ]}
    >
      <Card>
        <Text as="p">Product details</Text>
      </Card>
    </Page>
  );
}
```

***

## Updated properties

### actions

Replace the `actions` descriptor array with explicit `s-button` or `s-link` elements. Put actions that define the page in the appropriate `s-page` action slot. Put less frequent actions inside a sibling `s-menu`.

| Polaris React behavior | Polaris web components |
| - | - |
| Visible secondary action | `s-button slot="secondary-actions"` |
| Navigation action | `s-link` with `href`, in a supported page slot or visible composition |
| Overflow action | `s-button` child of `s-menu` |
| Action icon component | A documented icon name string in `icon` |
| `onAction` | `onClick` |

For the complete action-descriptor mapping, see [Migrate ActionList](https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/action-list#map-item-properties).

### groups

Each group becomes a labelled trigger `s-button` and a sibling `s-menu`. The trigger's `commandFor` references the menu's `id`. Render menu actions as buttons, and use `s-section` only when headings help merchants scan a larger menu.

| Polaris React group field | Polaris web components |
| - | - |
| `title` | Trigger button text, or `s-section heading` when the title labels items inside a shared menu |
| `actions` | `s-button` children of `s-menu` |
| `icon` | `icon` on the trigger button |
| `disabled` | `disabled` on the trigger, or on individual items when only some actions are unavailable |
| `index` | Render the trigger or section in the intended order |
| `onActionAnyItem` | Call the shared callback from each item's `onClick` handler |
| `onClick(openActions)` | Put required side effects on the trigger's `onClick` and let `commandFor` open the menu |
| `details` | No menu equivalent; move essential details into visible page content |
| `badge` | No menu-trigger badge; keep essential state visible outside the menu or in a self-contained label |

***

## Removed properties

### rollup

Remove `rollup`. Decide explicitly which actions remain visible and which belong in a menu. Don't preserve width-measurement behavior through a compatibility wrapper.

Review the result at narrow widths. If the page contains too many actions, reduce or regroup them instead of hiding primary actions.

### rollup​Actions​Label

Use a visible, self-contained trigger label such as **More actions**. Set `accessibilityLabel` on `s-menu` to describe the menu's scope, such as **Product actions**.

### on​Action​Rollup

There is no rollup-state callback. Remove app behavior that depends only on whether Polaris React happened to overflow an action. If responsive state changes actual business behavior, model that requirement independently from the action presentation.

***

## New responsibilities

The migrated page owns the action hierarchy:

* Which action is primary, visible secondary, or placed in a menu.
* Which grouped actions need a heading.
* Confirmation and result feedback for consequential actions.
* Action availability based on current resource state.

Don't duplicate the same action in a visible slot and a menu at the same viewport size.

***

## Test the migration

* Test every visible and menu action, including navigation and destructive results.
* Verify menu triggers and items with keyboard and screen-reader navigation.
* Confirm focus returns to the trigger when the menu closes.
* Test narrow widths, zoom, and translated labels.
* Verify important actions remain visible and the menu stays scannable.
* Remove `ActionMenu` and unused Polaris React icon imports after the final call site is migrated.

***

## Related guidance

* [Page component](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/page)
* [Menu component](https://shopify.dev/docs/api/app-home/web-components/actions/menu)
* [Button component](https://shopify.dev/docs/api/app-home/web-components/actions/button)
* [Migrate ActionList](https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/action-list)

***