# 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.

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

```

```js
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

value: `string`

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

### id

value: `string`

A unique identifier for the component.

### onClose

value: `() => void`

Callback to run when the Menu is closed

### onOpen

value: `() => void`

Callback to run when the Menu is opened

## Related

- [Popover](../../../checkout-ui-extensions/unstable/components/overlays/popover)

## 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

value: `string`

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

value: `ButtonAccessibilityRole`

  - ButtonAccessibilityRole: 'button' | 'submit'
The role of the button that will be rendered.

`button`: renders a regular button.

`submit`: renders a button that submits a form.

### activateAction

value: `'auto' | 'copy'`

Sets the action the `activateTarget` should take when this pressable is activated.

Supported actions by component:

| Component     | Supported Actions | Default ('auto')  |
|---------------|-------------------|-------------------|
| [`ClipboardItem`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/clipboarditem) | 'copy'            | 'copy'            |

### activateTarget

value: `string`

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

value: `Extract<Appearance, 'monochrome' | 'critical'>`

  - Appearance: 'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
Specify the color treatment of the Button.

### disabled

value: `boolean`

Disables the button, disallowing any interaction.

### id

value: `string`

A unique identifier for the component.

### loading

value: `boolean`

Replaces content with a loading indicator.

### loadingLabel

value: `string`

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

### onPress

value: `() => void`

Callback that is run when the button is pressed.

### overlay

value: `RemoteFragment`

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

### submit

value: `boolean`

Allows the button to submit a form.

### to

value: `string`

Destination URL to link to.

### toggles

value: `string`

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

## Related

- [Popover](../../../checkout-ui-extensions/unstable/components/overlays/popover)