# Core/Menu - Usage

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
| `trigger` | `React.ReactElement` | Yes | `--` | Single element that toggles the menu (e.g. button). Rendered as the menu trigger; must forward refs to a focusable DOM node (wrapped with React Aria {@link Pressable} internally). |
| `children` | `React.ReactNode` | No | `--` | Menu content. Use Menu.Item, Menu.Section, Menu.Header, Menu.Divider. |
| `contentProps` | `React.HTMLAttributes<HTMLDivElement>` | No | `--` | Optional props for the element wrapping the menu panel (e.g. pointer handlers when bridging trigger and menu). |
| `open` | `boolean` | No | `--` | Controlled open state. Omit for uncontrolled usage. |
| `onOpenChange` | `(open: boolean) => void` | No | `--` | Called when the menu should open or close. |
| `itemHoverAppearance` | `'default' \| 'accent'` | No | 'default' | Hover/selected styling for items. `accent`: TabNav submenu treatment per Tab Nav \| Vertical \| Item (Figma)—hover uses primary background + accent-hover text; selected uses accent-selected background, accent text, semibold label, inline-end accent bar. `default`: neutral grey hover only.<br>@default 'default' |
| `itemActiveAccentBar` | `boolean` | No | true | When `itemHoverAppearance` is `accent`, whether the active/selected row shows the inline-end accent bar (vertical TabNav indicator). Set to `false` for horizontal TabNav flyout menus where selection should not show that bar.<br>@default true |
| `itemActiveLabelSemibold` | `boolean` | No | true | When `itemHoverAppearance` is `accent`, whether the active/selected row uses a semibold label. Set to `false` for TabNav horizontal submenus where the active item should match normal menu weight.<br>@default true |
| `panelPadding` | `'default' \| 'none'` | No | 'default' | Inset of the menu panel (`role="menu"`). `none` uses a minimal inset so focus rings are not clipped under scroll/overflow; use for flyouts that should sit close to the popover edge (e.g. TabNav submenu).<br>@default 'default' |
| `popoverOffset` | `number` | No | 2 | Gap along the main axis between the trigger and the menu panel (React Aria `Popover` `offset`).<br>Defaults to 2px to match `spacing.xs`; `Popover` positioning takes a number, so the token cannot be applied via CSS.<br>Use a smaller value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav).<br>@default 2 |
| `trapFocus` | `boolean` | No | false | When `true`, focus is contained in the menu panel while it is open (Tab cycles within the panel; focus restores on close).<br>The popover stays non-modal so outside pointer dismiss still works. Use for patterns that must not move focus to sibling controls until the menu closes (e.g. horizontal TabNav flyouts).<br>@default false |