Menu

Menu

<MenuTrigger>
  <IconButton aria-label="Options"><DotsIcon /></IconButton>
  <Menu>
    <MenuItem onAction={() => {/* … */}}>Edit</MenuItem>
    <MenuItem shortcut="⌘D">Duplicate</MenuItem>
    <MenuSeparator />
    <MenuItem destructive>Delete</MenuItem>
  </Menu>
</MenuTrigger>

Install: @helixui/core

import { Menu, MenuItem, MenuTrigger, MenuSeparator, SubmenuTrigger } from '@helixui/core'

status: stable · since: 0.1.0

Tags: floating, menu, dropdown, actions

Anatomy

[ trigger ▾ ]
   ┌────────────────┐
   │ • Edit         │
   │ • Duplicate    │
   │ ─────────────  │
   │ • Delete  ⌘⌫   │
   └────────────────┘

Layout

• display — portal
• width — content
• height — content
• intrinsicSize — anchored to trigger, max-h with scroll
• stackable — false
• fullBleed — false

Visual

A floating panel anchored to its trigger. Items are rows with optional leading icon, label, and trailing kbd shortcut. Separators are 1px hairlines. Submenu items show a trailing chevron.

Props

Name	Type	Default	Description
placement	'top' | 'bottom' | 'start' | 'end'	bottom	Anchor placement.
selectionMode	'none' | 'single' | 'multiple'	none	Selection model. none for command menus.
...rest	MenuProps from react-aria-components	—	All forwarded.

Slots

• MenuTrigger children — the trigger button + Menu
• Menu children — MenuItem, MenuSeparator, SubmenuTrigger

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.bg.action.neutral.hover, color.bg.action.danger.subtle, color.border.default, color.text.primary, color.text.muted, color.text.action.danger, radius.md, space.1, space.2, space.3, space.4, font.family.sans, font.size.sm, font.size.xs, shadow.md

Accessibility

Role: menu

Keyboard

Key	Action
ArrowDown	Move down.
ArrowUp	Move up.
ArrowRight	Open submenu.
ArrowLeft	Close submenu.
Enter	Activate item.
Escape	Close menu.

Notes

• For destructive items, set destructive — color shifts to danger and the focused background lightens to danger.subtle.

Composes with

Component	Relation	Note
Button	trigger	Common opener (MenuTrigger).
IconButton	trigger	Common opener for icon-only triggers.
CommandPalette	alternative	CommandPalette is global ⌘K; Menu is anchored.
Popover	sibling
Dialog	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

context menu

“three-dot menu with Edit, Duplicate, Delete”

<MenuTrigger>
  <IconButton aria-label="More"><MoreIcon /></IconButton>
  <Menu>
    <MenuItem onAction={edit}>Edit</MenuItem>
    <MenuItem onAction={dup}>Duplicate</MenuItem>
    <MenuSeparator />
    <MenuItem onAction={remove}>Delete</MenuItem>
  </Menu>
</MenuTrigger>

Related

• Popover
• Dialog