# Menu component for Stripe Apps

Use a menu to present a group of actions that a user can choose from, often related to a particular object or context.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/menu?app-sdk-version=8.

To add the `Menu` component to your app:

```js
import {Menu, MenuItem, MenuGroup} from '@stripe/ui-extension-sdk/ui';
```

A basic menu is made up of an element to trigger the menu, and a series of MenuItems.

### Menu props

| Property   | Type                                                                                                                                                         |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  One or more `MenuGroup` or `MenuItem` components.                                                                          |
| `onAction` | (Optional)
  `((key: React.Key) => void) | undefined`

  Handler that is called when an item is selected.                                                    |
| `trigger`  | (Optional)
  `React.ReactNode`

  The trigger Element to show/hide the `Menu`. Must be a component that supports press events, such as a `Button` or `Link`. |

## Items

Menus contain multiple vertically arranged items.

### MenuItem props

| Property   | Type                                                                                                                                       |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component.                                                                           |
| `disabled` | (Optional)
  `boolean | undefined`

  Marks an item as disabled. Disabled items cannot be selected, focused, or otherwise interacted with. |
| `id`       | (Optional)
  `string | undefined`

  The id of the item. This will be passed into the `onAction` handler of `Menu`.                        |
| `onAction` | (Optional)
  `((key: React.Key) => void) | undefined`

  Handler that is called when an item is selected.                                  |

## Groups

You can divide items in a menu into groups.

### MenuGroup props

| Property   | Type                                                                 |
| ---------- | -------------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  One or more `MenuItem` components. |
| `title`    | (Optional)
  `React.ReactNode`                                       |

## Events

Use the `onAction` prop as a callback to handle `press` events on items. You can provide the `onAction` prop to the `Menu` to handle item activation across all items, or to the `MenuItem` directly to handle activation for individual items.

## Triggers

The menu `trigger` property works together with the menu to link the menu’s open state with a trigger’s pressed state.


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/menu?app-sdk-version=9.

To add the `Menu` component to your app:

```js
import {Menu, MenuItem, MenuGroup} from '@stripe/ui-extension-sdk/ui';
```

A basic menu is made up of an element to trigger the menu, and a series of MenuItems.

### Menu props

| Property   | Type                                                                                                                                                         |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  One or more `MenuGroup` or `MenuItem` components.                                                                          |
| `onAction` | (Optional)
  `((key: React.Key) => void) | undefined`

  Handler that is called when an item is selected.                                                    |
| `trigger`  | (Optional)
  `React.ReactNode`

  The trigger Element to show/hide the `Menu`. Must be a component that supports press events, such as a `Button` or `Link`. |

## Items

Menus contain multiple vertically arranged items.

### MenuItem props

| Property   | Type                                                                                                                                       |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component.                                                                           |
| `disabled` | (Optional)
  `boolean | undefined`

  Marks an item as disabled. Disabled items cannot be selected, focused, or otherwise interacted with. |
| `id`       | (Optional)
  `string | undefined`

  The id of the item. This will be passed into the `onAction` handler of `Menu`.                        |
| `onAction` | (Optional)
  `((key: React.Key) => void) | undefined`

  Handler that is called when an item is selected.                                  |

## Groups

You can divide items in a menu into groups.

### MenuGroup props

| Property   | Type                                                                 |
| ---------- | -------------------------------------------------------------------- |
| `children` | (Required)
  `React.ReactNode`

  One or more `MenuItem` components. |
| `title`    | (Optional)
  `React.ReactNode`                                       |

## Events

Use the `onAction` prop as a callback to handle `press` events on items. You can provide the `onAction` prop to the `Menu` to handle item activation across all items, or to the `MenuItem` directly to handle activation for individual items.

## Triggers

The menu `trigger` property works together with the menu to link the menu’s open state with a trigger’s pressed state.


## See also

- [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md)
- [Style your app](https://docs.stripe.com/stripe-apps/style.md)
- [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)