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.

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

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

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

import {Menu, Button, extension} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root, api) => {
  renderApp(root, api);
});

async function renderApp(root, api) {
  const menuFragment = root.createFragment();
  const menu = root.createComponent(Menu, {}, [
    root.createComponent(
      Button,
      {onPress: () => console.log('Submit problem')},
      'Submit problem',
    ),
    root.createComponent(Button, {to: 'https://shopify.com'}, 'Request return'),
    root.createComponent(Button, {appearance: 'critical'}, 'Cancel order'),
  ]);
  menuFragment.appendChild(menu);
  const button = root.createComponent(
    Button,
    {overlay: menuFragment},
    'Manage',
  );

  root.appendChild(button);
}

MenuProps

MenuProps

accessibilityLabel

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

id

A unique identifier for the component.

onClose

Callback to run when the Menu is closed

onOpen

Callback to run when the Menu is opened

ButtonProps children

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

Docs_Menu_Button_Action

accessibilityLabel

A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.

accessibilityRole

The role of the button that will be rendered. `button`: renders a regular button. `submit`: renders a button that submits a form.

activateAction

Sets the action the `activateTarget` should take when this pressable is activated. Supported actions by component: | Component | Supported Actions | Default ('auto') | |---------------|-------------------|-------------------| | [`ClipboardItem`](/docs/api/checkout-ui-extensions/latest/clipboarditem) | 'copy' | 'copy' |

activateTarget

ID of a component that should respond to activations (e.g. clicks) on this pressable. See `activateAction` for how to control the behavior of the target.

appearance

Specify the color treatment of the Button.

disabled

Disables the button, disallowing any interaction.

id

A unique identifier for the component.

loading

Replaces content with a loading indicator.

loadingLabel

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.

onPress

Callback that is run when the button is pressed.

overlay

An overlay component to render when the user interacts with the component.

submit

Allows the button to submit a form.

to

Destination URL to link to.

toggles

The component's identifier whose visibility will be toggled when this component is actioned.

ButtonAccessibilityRole

'button' | 'submit'

Appearance

'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'

Related

• Popover