Dropdown Menu

The Dropdown Menu component displays a list of actions or options when triggered.

Basic Usage

With Icons

Icons

An item's icon is a kebab-case Lucide icon name, resolved against lucide's runtime icons record — the same surface ui:button and the action:* family resolve against. A name that is not a live key of that record (an unknown or a retired spelling such as edit) renders no glyph, never a fallback glyph and never the literal name as text.

Dividers

An item is either a command or a divider between groups of commands — never both, and a divider never carries a label (objectui#6523). Author a divider as { "separator": true }; the retired { "type": "separator" } spelling is refused at parse time rather than silently ignored.

Schema

interface DropdownMenuCommandItem {
  label: string;
  icon?: string;                  // kebab-case Lucide icon name (e.g. "square-pen")
  shortcut?: string;              // e.g. "Ctrl+S" — a single string, not an array
  disabled?: boolean;
  onClick?: () => void;           // Click handler
  children?: DropdownMenuItem[];  // Submenu items — drawn as a nested submenu
}

interface DropdownMenuDividerItem {
  separator: true;                // renders as a divider — no label
}

type DropdownMenuItem = DropdownMenuCommandItem | DropdownMenuDividerItem;

interface DropdownMenuSchema {
  type: 'dropdown-menu';
  trigger: SchemaNode | SchemaNode[];  // Trigger component
  items: DropdownMenuItem[];      // Menu items
  
  // Styling
  className?: string;
}

Handlers are declared on the item, not on the menu: the shipped MenuItem declares onClick?: () => void. The menu schema itself declares no event slot, so there is no menu-level onSelect.