# MenuTrigger

Wraps a trigger element and a `Menu` to create a dropdown menu. Positions the menu relative to the trigger.

## When to Use

- Dropdown menus from buttons
- Context menus attached to elements
- Any menu that opens from a trigger element

## Properties

- **`trigger`** `'press' | 'longPress'` (default: `'press'`) — How the menu is opened
- **`placement`** `Placement` (default: `'bottom start'`) — Menu position relative to trigger
- **`closeOnSelect`** `boolean` — Close menu when an item is selected
- **`isDisabled`** `boolean` — Disable the trigger
- **`isOpen`** `boolean` — Whether the menu is open (controlled)
- **`shouldFlip`** `boolean` (default: `true`) — Flip menu position when overflowing viewport
- **`offset`** `number` (default: `8`) — Distance from trigger in pixels
- **`crossOffset`** `number` (default: `0`) — Cross-axis offset in pixels
- **`containerPadding`** `number` — Minimum padding from viewport edges in pixels

Extends React Aria `AriaMenuTriggerProps` and `PositionProps`.

### Base Properties

Supports [Base properties](../../BaseProperties.md).

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

### Basic dropdown

```jsx
<MenuTrigger>
  <Button>Open Menu</Button>
  <Menu onAction={(key) => console.log(key)}>
    <Menu.Item key="edit">Edit</Menu.Item>
    <Menu.Item key="delete">Delete</Menu.Item>
  </Menu>
</MenuTrigger>
```

### Long press trigger

```jsx
<MenuTrigger trigger="longPress">
  <Button>Long Press Me</Button>
  <Menu>
    <Menu.Item key="option1">Option 1</Menu.Item>
    <Menu.Item key="option2">Option 2</Menu.Item>
  </Menu>
</MenuTrigger>
```
