ObjectUIComponentsOverlay
Dropdown Menu
Display a menu of actions or options triggered by a button
The Dropdown Menu component displays a list of actions or options when triggered.
Basic Usage
Basic Dropdown Menu
{
"type": "dropdown-menu",
"trigger": {
"type": "button",
"label": "Open Menu"
},
"items": [
{
"label": "Profile",
"value": "profile"
},
{
"label": "Settings",
"value": "settings"
},
{
"type": "separator"
},
{
"label": "Logout",
"value": "logout"
}
]
}With Icons
With Icons
{
"type": "dropdown-menu",
"trigger": {
"type": "button",
"label": "Actions",
"icon": "more-horizontal"
},
"items": [
{
"label": "Edit",
"value": "edit",
"icon": "edit"
},
{
"label": "Copy",
"value": "copy",
"icon": "copy"
},
{
"label": "Delete",
"value": "delete",
"icon": "trash",
"variant": "destructive"
}
]
}Schema
interface DropdownMenuItem {
label?: string;
value?: string;
icon?: string;
variant?: 'default' | 'destructive';
type?: 'separator';
disabled?: boolean;
}
interface DropdownMenuSchema {
type: 'dropdown-menu';
trigger: ComponentSchema; // Trigger component
items: DropdownMenuItem[]; // Menu items
// Events
onSelect?: string | ActionConfig;
// Styling
className?: string;
}