import { Menu, Portal, Surface, Item, Icon } from "@elemnts-ui/react";

<Menu.Root>
  <Menu.Trigger asChild>
    <button>Open Menu</button>
  </Menu.Trigger>
  <Portal>
    <Menu.Positioner>
      <Menu.Content asChild>
        <Surface w="12rem">
          <Surface.Content p="4">
            <Menu.Item value="edit" asChild>
              <Item>
                <Icon icon="tabler:edit" />
                <Menu.ItemText>Edit</Menu.ItemText>
              </Item>
            </Menu.Item>
            <Menu.Separator />
            <Menu.Item value="delete" asChild>
              <Item>
                <Icon icon="tabler:trash" />
                <Menu.ItemText>Delete</Menu.ItemText>
              </Item>
            </Menu.Item>
          </Surface.Content>
        </Surface>
      </Menu.Content>
    </Menu.Positioner>
  </Portal>
</Menu.Root>;

Command

Use the Kbd component to show command shortcuts in the menu.

Use the Menu.ContextTrigger component to open the menu via a context action (right-click or long-press).

Group

Group related menu items using the Menu.ItemGroup component.

Submenu

Create submenus by nesting Menu components and using Menu.TriggerItem.

API Reference

The root menu component.

Prop	Type	Default
aria-label	`string`	-
closeOnSelect	`boolean`	`true`
composite	`boolean`	`true`
defaultHighlightedValue	`string`	-
defaultOpen	`boolean`	-
defaultTriggerValue	`string`	-
hideMode	`HideMode`	`'display-none'`
highlightedValue	`string`	-
immediate	`boolean`	-
lazyMount	`boolean`	`false`
loopFocus	`boolean`	`false`
navigate	`(details: NavigateDetails) => void`	-
onEscapeKeyDown	`(event: KeyboardEvent) => void`	-
onExitComplete	`VoidFunction`	-
onFocusOutside	`(event: FocusOutsideEvent) => void`	-
onHighlightChange	`(details: HighlightChangeDetails) => void`	-
onInteractOutside	`(event: InteractOutsideEvent) => void`	-
onOpenChange	`(details: OpenChangeDetails) => void`	-
onPointerDownOutside	`(event: PointerDownOutsideEvent) => void`	-
onRequestDismiss	`(event: LayerDismissEvent) => void`	-
onSelect	`(details: SelectionDetails) => void`	-
onTriggerValueChange	`(details: TriggerValueChangeDetails) => void`	-
open	`boolean`	-
positioning	`PositioningOptions`	-
present	`boolean`	-
skipAnimationOnMount	`boolean`	`false`
triggerValue	`string`	-
typeahead	`boolean`	`true`
unmountOnExit	`boolean`	`false`
asChild	`boolean`	`false`

Menu

Usage

Command

Context Menu

Group

Submenu

API Reference

Menu