Dropdown Menu

Composable dropdown menu with keyboard navigation, groups, labels, separators, shortcuts, and destructive items.

<template>
  <VxDropdownMenu width="14rem">
    <template #trigger>
      <VxButton variant="outline">Open Menu</VxButton>
    </template>
    <VxDropdownMenuLabel>My Account</VxDropdownMenuLabel>
    <VxDropdownMenuSeparator />
    <VxDropdownMenuGroup>
      <VxDropdownMenuItem>
        <UserIcon /> Profile
        <VxDropdownMenuShortcut>⇧⌘P</VxDropdownMenuShortcut>
      </VxDropdownMenuItem>
      <VxDropdownMenuItem>
        <CreditCardIcon /> Billing
        <VxDropdownMenuShortcut>⌘B</VxDropdownMenuShortcut>
      </VxDropdownMenuItem>
      <VxDropdownMenuItem>
        <SettingsIcon /> Settings
        <VxDropdownMenuShortcut>⌘S</VxDropdownMenuShortcut>
      </VxDropdownMenuItem>
    </VxDropdownMenuGroup>
    <VxDropdownMenuSeparator />
    <VxDropdownMenuItem disabled>API</VxDropdownMenuItem>
    <VxDropdownMenuSeparator />
    <VxDropdownMenuItem destructive>
      <LogOutIcon /> Log out
      <VxDropdownMenuShortcut>⇧⌘Q</VxDropdownMenuShortcut>
    </VxDropdownMenuItem>
  </VxDropdownMenu>
</template>

Alignment

<template>
  <VxDropdownMenu align="start">...</VxDropdownMenu>
  <VxDropdownMenu align="center">...</VxDropdownMenu>
  <VxDropdownMenu align="end">...</VxDropdownMenu>
</template>

With Icons

<template>
  <VxDropdownMenu>
    <template #trigger><VxButton variant="outline">Actions</VxButton></template>
    <VxDropdownMenuItem><PlusIcon /> New File</VxDropdownMenuItem>
    <VxDropdownMenuItem><DownloadIcon /> Download</VxDropdownMenuItem>
    <VxDropdownMenuSeparator />
    <VxDropdownMenuItem destructive><TrashIcon /> Delete</VxDropdownMenuItem>
  </VxDropdownMenu>
</template>

Disabled Items

<template>
  <VxDropdownMenu>
    <template #trigger><VxButton>Options</VxButton></template>
    <VxDropdownMenuItem>Edit</VxDropdownMenuItem>
    <VxDropdownMenuItem disabled>Archive</VxDropdownMenuItem>
    <VxDropdownMenuItem destructive>Delete</VxDropdownMenuItem>
  </VxDropdownMenu>
</template>

Props

VxDropdownMenu

Prop	Type	Default	Description
align	'start' | 'center' | 'end'	'start'	Horizontal alignment
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	Side to open on
width	string	''	Content width

VxDropdownMenuItem

Prop	Type	Default	Description
disabled	boolean	false	Disable item
destructive	boolean	false	Red destructive style
inset	boolean	false	Extra left padding

Sub-components

Component	Description
VxDropdownMenuLabel	Section label (accepts inset prop)
VxDropdownMenuSeparator	Horizontal divider
VxDropdownMenuShortcut	Right-aligned shortcut text
VxDropdownMenuGroup	Groups items semantically

Events

Component	Event	Description
VxDropdownMenuItem	select	Fires when item is clicked