DropdownMenu

Desktop-style popup menu with click trigger and context menu support.

Basic Usage

Wrap the trigger element with ADropdownMenu and define menu items with AMenuItem.

<ADropdownMenu>
  <template #trigger>
    <ABtn>Actions</ABtn>
  </template>
  <AMenuItem label="New File" />
  <AMenuItem label="Open File" />
  <AMenuDivider />
  <AMenuItem label="Save" accelerator="⌘S" />
  <AMenuItem label="Save As" disabled />
</ADropdownMenu>

Danger Action

Set danger to mark a dangerous action.

<ADropdownMenu>
  <template #trigger>
    <ABtn>More</ABtn>
  </template>
  <AMenuItem label="Edit" />
  <AMenuDivider />
  <AMenuItem label="Delete" danger />
</ADropdownMenu>

Context Menu

Set trigger="contextmenu" for right-click menu.

Right-click here

<ADropdownMenu trigger="contextmenu">
  <template #trigger>
    <div>Right-click here</div>
  </template>
  <AMenuItem label="Copy" />
  <AMenuItem label="Paste" />
  <AMenuDivider />
  <AMenuItem label="Select All" />
</ADropdownMenu>

Groups

Use AMenuGroup to group menu items.

<ADropdownMenu>
  <template #trigger>
    <ABtn>Group Menu</ABtn>
  </template>
  <AMenuGroup label="Edit">
    <AMenuItem label="Undo" />
    <AMenuItem label="Redo" />
  </AMenuGroup>
  <AMenuDivider />
  <AMenuGroup label="View">
    <AMenuItem label="Zoom" />
    <AMenuItem label="Fullscreen" />
  </AMenuGroup>
</ADropdownMenu>

API

DropdownMenu Props

Name	Type	Default	Description
modelValue	boolean	false	Visibility
trigger	'click' | 'contextmenu' | 'hover'	'click'	Trigger method
placement	'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end'	'bottom-start'	Popup position
disabled	boolean	false	Disabled
autoClose	boolean	true	Auto-close on item click

DropdownMenu Events

Name	Description
update:modelValue	Visibility changed
open	Opened
close	Closed

MenuItem Props

Name	Type	Default	Description
label	string	—	Menu item text
disabled	boolean	false	Disabled
danger	boolean	false	Danger mode
icon	string	—	Icon class name (RemixIcon)
accelerator	string	—	Keyboard shortcut text

Interaction

• Auto-close on outside click
• Auto-close on item select (autoClose)
• Disabled state prevents interaction
• Danger operations highlighted in red
• Context menu positions at mouse location
• Fade + translate open animation