Menu
Menu is a view that displays a menu of options. Menu presents a list of actions that can be triggered by the user, typically shown as a dropdown or popover.
Menu is a view that displays a menu of options. Menu presents a list of actions that can be triggered by the user, typically shown as a dropdown or popover.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<Menu trigger={<Button>Options</Button>} items={[
{ label: 'Edit', action: () => alert('Edit clicked') },
{ label: 'Delete', action: () => alert('Delete clicked') },
{ label: 'Share', action: () => alert('Share clicked') },
]}></Menu>With Icons
Preview unavailable for this example in the static docs build.
Show code
<Menu trigger={<Button>Menu</Button>} items={[
{ label: 'Edit', icon: '✏️', action: () => alert('Edit') },
{ label: 'Delete', icon: '🗑️', action: () => alert('Delete') },
{ label: 'Share', icon: '📤', action: () => alert('Share') },
]}></Menu>With Disabled Items
Preview unavailable for this example in the static docs build.
Show code
<Menu trigger={<Button>Menu</Button>} items={[
{ label: 'Enabled Item', action: () => alert('Enabled') },
{ label: 'Disabled Item', disabled: true },
{ label: 'Another Enabled', action: () => alert('Another') },
]}></Menu>Placement
Preview unavailable for this example in the static docs build.
Show code
<Menu trigger={<Button>Menu (Top)</Button>} placement="top" items={[
{ label: 'Item 1', action: () => alert('Item 1') },
{ label: 'Item 2', action: () => alert('Item 2') },
]}></Menu>Submenus
Preview unavailable for this example in the static docs build.
Show code
<Menu trigger={<Button>Advanced</Button>} items={[
{
label: 'Share',
action: () => alert('Share'),
},
{
label: 'More options',
submenu: [
{ label: 'Duplicate', action: () => alert('Duplicate') },
{ label: 'Rename', action: () => alert('Rename') },
],
},
]}></Menu>Grouped Actions
Preview unavailable for this example in the static docs build.
Show code
<Menu trigger={<Button>Project actions</Button>} items={[
{ section: 'File', label: 'New file', action: () => alert('New file') },
{ section: 'File', label: 'Open recent', action: () => alert('Open recent') },
{ section: 'Danger zone', label: 'Delete project', destructive: true, action: () => alert('Delete project') },
]}></Menu>API
| Prop | Type | Required | Description |
|---|---|---|---|
items | IMenuItem[] | Yes | Menu items |
trigger | ReactNode | Yes | Trigger element |
placement | 'top' | 'bottom' | 'left' | 'right' | No | Menu placement Default: 'bottom' |
isOpen | boolean | No | Whether the menu is open (controlled) |
onOpenChange | (isOpen: boolean) => void | No | Open state change handler |
Inherits additional props from IBaseComponent.
Overview
Menu is a view that displays a menu of options. Menu presents a list of actions that can be triggered by the user, typically shown as a dropdown or popover.
SwiftUI Correspondence: Similar to SwiftUI's Menu.
Web behavior: The top-level menu follows the menu-button pattern with keyboard opening, roving focus, and Escape/outside-click dismissal. One submenu level is supported with pointer hover and keyboard traversal.
With Icons
Add icons to menu items:
With Disabled Items
Disable specific menu items:
Placement
Control menu placement:
Submenus
Nested actions can be presented in a submenu:
Grouped Actions
Sections and destructive actions can be expressed inline with the item list:
Notes
- Menu requires a
triggerelement and an array ofitems - Each item can have a
label, optionalicon, andaction - Items can opt into
sectionheadings anddestructivestyling - Items can be disabled with the
disabledprop - Menu supports different placements (top, bottom, left, right)
- Menu automatically handles positioning, Escape dismissal, and outside-click dismissal
- One submenu level is supported for nested actions
Best Practices
- Clear actions: Use descriptive labels for menu items
- Icons: Use icons to improve visual recognition
- Grouping: Group related actions together
- Destructive actions: Clearly mark destructive actions
- Accessibility: Ensure menu is keyboard accessible