Migrate ActionMenu 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 and use s-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.

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>
  );
}

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>
  );
}

Anchor to Updated propertiesUpdated properties

Anchor to actionsactions

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.

For the complete action-descriptor mapping, see Migrate ActionList.

Anchor to groupsgroups

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.

Anchor to Removed propertiesRemoved properties

Anchor to rolluprollup

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.

Anchor to rollupActionsLabelrollupActionsLabel

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.

Anchor to onActionRolluponActionRollup

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.

Anchor to New responsibilitiesNew 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.

Anchor to Test the migrationTest 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.

Anchor to Related guidanceRelated guidance

• Page component
• Menu component
• Button component
• Migrate ActionList