Menu & MenuItem Components
Dropdown menus with customizable placement, icons, and action-oriented behavior
Basic Usage
Simple Menu
Styled Menu
Click the buttons to see dropdown menus. Items automatically close the menu when clicked.
Placement Options
Bottom Start
Top Start
Disabled Menu
Menus support different placement options and can be disabled.
Component Composition
Editable Input + Menu Integration
This demonstrates how components can communicate with each other. The menu's "Edit" action triggers the editable input to enter edit mode.
⋮
Try clicking the menu button (⋮) and selecting "Edit" - it will programmatically put the editable input into edit mode.
Event Log
Menu Events
No events yet...
Menu Features:
- Placement Options - 6 different dropdown positions
- Icon Support - String (emoji) and imported SVG icons
- Auto-close - Menus close when items are clicked or when clicking outside
- Keyboard Support - Escape key closes menus
- Action-oriented - Designed for commands, not selection
- Event Handling -
on:open,on:close,on:click - Disabled State - Both menus and individual items can be disabled
- Separators - Visual grouping with MenuSeparator component