DropdownMenu

Dropdown menu component with customizable items, icons, separators, and destructive actions

Draft Actions Menu

Common actions for draft items

Props:
{ trigger: "MoreVertical icon", align: "end" }

Button Menu

Menu triggered by a button

Props:
{ trigger: "Button" }

With Separators

Group related actions with separators

Props:
{ DropdownMenuSeparator: true }

With Labels

Add labels to categorize menu items

Props:
{ DropdownMenuLabel: true }

User Account Menu

User profile actions with logout

Props:
{ destructive: "LogOut" }

Checkbox Items

Toggle options with checkboxes

Props:
{ DropdownMenuCheckboxItem: true }

Radio Group

Select one option from a group

Props:
{ DropdownMenuRadioGroup: true }

Submenu

Nested menu with submenu items

Props:
{ DropdownMenuSub: true }

Icon-only Items

Menu with icon-only items for compact display

Props:
{ icon: "only" }

Context Menu

Right-click style menu for contextual actions

Props:
{ variant: "context" }

Alignment Options

Menu aligned to start position

Props:
{ align: "start" }

File Actions

Common file manipulation actions

Props:
{ category: "files" }

Selectable Menu Items

Components for building selection menus with visual feedback and inline actions

Selectable Items

Single selection with check indicator

Props:
{ DropdownMenuSelectableItem: true, selected: "boolean", onSelect: "() => void" }

Items with Actions

Selection with hover edit/delete buttons

Props:
{ DropdownMenuItemWithActions: true, onEdit: "() => void", onDelete: "() => void" }

Add Item

Entry point for creating new items

Props:
{ DropdownMenuAddItem: true, onClick: "() => void" }

Combined Pattern

Full pattern with None option, items, and add entry

Props:
{ pattern: "selection-with-management" }

Usage Guidelines

  • •Dropdown menus appear on click/tap and close when clicking outside or selecting an item
  • •Use DropdownMenuSeparator to group related actions visually
  • •Destructive actions (delete, remove) should use style={{ color: 'var(--primary)' }}
  • •Add icons to menu items for better scannability and visual hierarchy
  • •Use align="end" for menus triggered by icons in the top-right corner
  • •Menu items have a height of 32px (h-8) with 13px font size for optimal touch targets
  • •Submenus automatically position based on available space to prevent overflow
  • •Background color on hover: var(--color-surface-300)
  • •Shadow uses elevation system: var(--elevation-300)

Selectable Items Components

  • •Use DropdownMenuSelectableItem for single-selection menus with check indicator
  • •Use DropdownMenuItemWithActions when items need edit/delete actions on hover
  • •Use DropdownMenuAddItem as an entry point for creating new items, typically at the bottom of the menu
  • •Common pattern: "None" option at top, selectable items with actions in middle, separator, then add item at bottom
  • •Action buttons (edit/delete) appear on hover to keep the UI clean while providing quick access