# Menu

A dropdown action menu or menu bar.

## How to use it

Connect onSelect on action items. Combine separators, groups, checkbox options and submenus.



## Import


```tsx
import { Menu, MenuTrigger, MenuContent, MenuItem, MenuGroup, MenuLabel, MenuSeparator, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuShortcut, MenuPortal, MenuDropdown } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<Menu><MenuTrigger asChild><Button variant="outline">Actions</Button></MenuTrigger><MenuContent><MenuItem onSelect={() => window.alert("New demo project")}>New project</MenuItem><MenuSeparator /><MenuItem disabled>Export (unavailable)</MenuItem></MenuContent></Menu>
```


## Menu bar

```tsx
<Menu variant="bar"><MenuDropdown><MenuTrigger>File</MenuTrigger><MenuContent><MenuItem>New</MenuItem><MenuItem>Open</MenuItem></MenuContent></MenuDropdown><MenuDropdown><MenuTrigger>Edit</MenuTrigger><MenuContent><MenuItem>Copy</MenuItem><MenuItem>Paste</MenuItem></MenuContent></MenuDropdown></Menu>
```


## API: Menu


```typescript
Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| variant | "dropdown" \| "bar" | Yes | Visual variant. Use a value supported by this component. |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultOpen | boolean | No | Whether it starts open in uncontrolled mode. |
| defaultValue | string | No | Initial value when the component manages its own state. |
| dir | "ltr" \| "rtl" | No | Interface reading direction. |
| id | string | No | Element identifier; associates labels and descriptions. |
| loop | boolean | No | See the published type. |
| modal | boolean | No | See the published type. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onOpenChange | ((open: boolean) => void) | No | Receives the new open state. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| onValueChange | ((value: string) => void) | No | Receives the value after an interaction. |
| open | boolean | No | Controlled open state. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| value | string | No | Controlled value. Update it from the change callback. |

## API: MenuTrigger


```typescript
MenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<DropdownPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLButtonElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLButtonElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLButtonElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | "button" \| "submit" \| "reset" | No | Operation type or mode; values depend on the component. |
| value | string \| number \| readonly string[] | No | Controlled value. Update it from the change callback. |

## API: MenuContent


```typescript
MenuContent: React.ForwardRefExoticComponent<MenuContentProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| align | "center" \| "start" \| "end" | No | Content alignment. |
| alignOffset | number | No | Offset from the chosen alignment. |
| aria-label | string | No | Accessible name of the control. |
| arrowPadding | number | No | See the published type. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| avoidCollisions | boolean | No | See the published type. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| collisionBoundary | Boundary \| Boundary[] | No | See the published type. |
| collisionPadding | number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>> | No | See the published type. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| hideWhenDetached | boolean | No | See the published type. |
| id | string | No | Element identifier; associates labels and descriptions. |
| loop | boolean | No | Whether keyboard navigation should loop around |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onCloseAutoFocus | ((event: Event) => void) | No | Event handler called when auto-focusing on close. Can be prevented. |
| onEscapeKeyDown | ((event: KeyboardEvent) => void) | No | See the published type. |
| onFocusOutside | ((event: FocusOutsideEvent) => void) | No | See the published type. |
| onInteractOutside | ((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void) | No | See the published type. |
| onPointerDownOutside | ((event: PointerDownOutsideEvent) => void) | No | See the published type. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| side | "left" \| "right" \| "top" \| "bottom" | No | Side from which the panel appears. |
| sideOffset | number | No | Distance between the trigger and content. |
| sticky | "partial" \| "always" | No | See the published type. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| updatePositionStrategy | "always" \| "optimized" | No | See the published type. |

## API: MenuItem


```typescript
MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| inset | boolean | No | See the published type. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSelect | ((event: Event) => void) | No | Action or selection made by the user. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| textValue | string | No | See the published type. |
| title | string | No | Title or supplementary information. |

## API: MenuGroup


```typescript
MenuGroup: React.ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: MenuLabel


```typescript
MenuLabel: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| inset | boolean | No | See the published type. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: MenuSeparator


```typescript
MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: MenuCheckboxItem


```typescript
MenuCheckboxItem: React.ForwardRefExoticComponent<MenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| checked | CheckedState | No | Controlled selection state. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onCheckedChange | ((checked: boolean) => void) | No | Receives the new selection state. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSelect | ((event: Event) => void) | No | Action or selection made by the user. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| textValue | string | No | See the published type. |
| title | string | No | Title or supplementary information. |

## API: MenuRadioGroup


```typescript
MenuRadioGroup: typeof RoutedRadioGroup
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| onValueChange | ((value: string) => void) | No | Receives the value after an interaction. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| value | string | No | Controlled value. Update it from the change callback. |

## API: MenuRadioItem


```typescript
MenuRadioItem: React.ForwardRefExoticComponent<MenuRadioItemProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| value | string | Yes | Controlled value. Update it from the change callback. |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSelect | ((event: Event) => void) | No | Action or selection made by the user. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| textValue | string | No | See the published type. |
| title | string | No | Title or supplementary information. |

## API: MenuSub


```typescript
MenuSub: typeof RoutedSub
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | ReactNode | No | Content or child elements of the component. |
| defaultOpen | boolean | No | Whether it starts open in uncontrolled mode. |
| onOpenChange | ((open: boolean) => void) | No | Receives the new open state. |
| open | boolean | No | Controlled open state. |

## API: MenuSubTrigger


```typescript
MenuSubTrigger: React.ForwardRefExoticComponent<MenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| inset | boolean | No | See the published type. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| textValue | string | No | See the published type. |
| title | string | No | Title or supplementary information. |

## API: MenuSubContent


```typescript
MenuSubContent: React.ForwardRefExoticComponent<MenuSubContentProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| align | "start" \| "end" | No | Content alignment. |
| alignOffset | number | No | Offset from the chosen alignment. |
| aria-label | string | No | Accessible name of the control. |
| arrowPadding | number | No | See the published type. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| avoidCollisions | boolean | No | See the published type. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| collisionBoundary | Boundary \| Boundary[] | No | See the published type. |
| collisionPadding | number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>> | No | See the published type. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| hideWhenDetached | boolean | No | See the published type. |
| id | string | No | Element identifier; associates labels and descriptions. |
| loop | boolean | No | Whether keyboard navigation should loop around |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onEscapeKeyDown | ((event: KeyboardEvent) => void) | No | See the published type. |
| onFocusOutside | ((event: FocusOutsideEvent) => void) | No | See the published type. |
| onInteractOutside | ((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void) | No | See the published type. |
| onPointerDownOutside | ((event: PointerDownOutsideEvent) => void) | No | See the published type. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| sideOffset | number | No | Distance between the trigger and content. |
| sticky | "partial" \| "always" | No | See the published type. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| updatePositionStrategy | "always" \| "optimized" | No | See the published type. |

## API: MenuShortcut


```typescript
MenuShortcut: {
    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
    displayName: string;
}
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLSpanElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLSpanElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLSpanElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: MenuPortal


```typescript
MenuPortal: typeof RoutedPortal
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | ReactNode | No | Content or child elements of the component. |
| container | Element \| DocumentFragment \| null | No | Specify a container element to portal the content into. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |

## API: MenuDropdown


```typescript
MenuDropdown: React.FC<React.ComponentPropsWithoutRef<typeof BarPrimitive.Menu>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| __scopeMenubar | Scope | No | See the published type. |
| children | ReactNode | No | Content or child elements of the component. |
| value | string | No | Controlled value. Update it from the change callback. |

Source: https://kivora.pro/docs/componentes/menu