Menu

React

Usage

import { Menu } from '@zalify-ui/react'

<Menu.Root>
  <Menu.Trigger />
  <Menu.Positioner>
    <Menu.Content>
      <Menu.Arrow />
      <Menu.Item />
      <Menu.ItemGroup>
        <Menu.Item />
      </Menu.ItemGroup>
      <Menu.Separator />
      <Menu.CheckboxItem>
        <Menu.ItemIndicator />
      </Menu.CheckboxItem>
      <Menu.RadioItemGroup>
        <Menu.RadioItem>
          <Menu.ItemIndicator />
        </Menu.RadioItem>
      </Menu.RadioItemGroup>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>

Examples

Sizes

Use the size prop to adjust the size of the menu items.

React

Use the Menu.ContextTrigger component to create a context menu.

React

Group

Use the Menu.ItemGroup component to group related menu items.

React

Submenu

Here's an example of how to create a submenu.

React

Radio Group

Here's an example of how to create a menu with radio items.

React

Checkbox Items

Here's an example of how to create a menu with checkbox items.

React

Avatar

Here's an example that composes the Menu with the Avatar component to display a menu underneath an avatar.

React

Props

Root

Prop	Default	Type
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`
`closeOnSelect`	`true`	`boolean` Whether to close the menu when an option is selected
`composite`	`true`	`boolean` Whether the menu is a composed with other composite widgets like a combobox or tabs
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`loopFocus`	`false`	`boolean` Whether to loop the keyboard navigation.
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`typeahead`	`true`	`boolean` Whether the pressing printable characters should trigger typeahead navigation
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`anchorPoint`		`Point` The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
`aria-label`		`string` The accessibility label for the menu
`defaultHighlightedValue`		`string` The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.
`defaultOpen`		`boolean` The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.
`highlightedValue`		`string` The controlled highlighted value of the menu item.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string contextTrigger: string content: string groupLabel: (id: string) => string group: (id: string) => string positioner: string arrow: string }>` The ids of the elements in the menu. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`navigate`		`(details: NavigateDetails) => void` Function to navigate to the selected item if it's an anchor element
`onEscapeKeyDown`		`(event: KeyboardEvent) => void` Function called when the escape key is pressed
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onHighlightChange`		`(details: HighlightChangeDetails) => void` Function called when the highlighted menu item changes.
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the menu opens or closes
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onRequestDismiss`		`(event: LayerDismissEvent) => void` Function called when this layer is closed due to a parent layer being closed
`onSelect`		`(details: SelectionDetails) => void` Function called when a menu item is selected.
`open`		`boolean` The controlled open state of the menu
`positioning`		`PositioningOptions` The options used to dynamically position the menu
`present`		`boolean` Whether the node is present (controlled by the user)

Item

Prop	Default	Type
`value`*		`string` The unique value of the menu item option.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`closeOnSelect`		`boolean` Whether the menu should be closed when the option is selected.
`disabled`		`boolean` Whether the menu item is disabled
`onSelect`		`VoidFunction` The function to call when the item is selected
`valueText`		`string` The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

RadioItemGroup

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`onValueChange`		`(e: ValueChangeDetails) => void`
`value`		`string`

RadioItem

Prop	Default	Type
`value`*		`string` The value of the option
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`closeOnSelect`		`boolean` Whether the menu should be closed when the option is selected.
`disabled`		`boolean` Whether the menu item is disabled
`valueText`		`string` The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

Usage

Examples

Sizes

Context Menu

Group

Submenu

Radio Group

Checkbox Items

Avatar

Props

Root

Item

RadioItemGroup

RadioItem