DropdownMenu

A floating menu panel triggered by a slot. Closes on outside click, Escape key, or when a DropdownItem is clicked. Compose with DropdownItem, DropdownItemCheckbox, and DropdownItemRadio.

ExamplesCodeUsageChangelog

Basic usage

Tailwind v4

<DropdownMenu>
  <template #trigger>
    <Button variant="secondary">Actions</Button>
  </template>
  <DropdownItem>Edit</DropdownItem>
  <DropdownItem>Duplicate</DropdownItem>
  <DropdownItem>Delete</DropdownItem>
</DropdownMenu>

With descriptions and icons

Tailwind v4

<DropdownMenu>
  <template #trigger>
    <Button variant="secondary">Options</Button>
  </template>
  <DropdownItem elem-before="✏️" description="Modify this record">Edit</DropdownItem>
  <DropdownItem elem-before="📋" description="Create a copy">Duplicate</DropdownItem>
  <DropdownItem elem-before="🗑️" description="Permanently remove" disabled>Delete</DropdownItem>
</DropdownMenu>

Placement

Tailwind v4

<DropdownMenu placement="bottom-start">...</DropdownMenu>
<DropdownMenu placement="bottom-end">...</DropdownMenu>
<DropdownMenu placement="top-start">...</DropdownMenu>
<DropdownMenu placement="top-end">...</DropdownMenu>

With checkbox and radio items

Tailwind v4

<script setup>
import { ref } from 'vue'
const checked = ref(false)
const radio = ref('list')
</script>

<template>
  <DropdownMenu>
    <template #trigger>
      <Button variant="secondary">View settings</Button>
    </template>
    <DropdownItemCheckbox v-model="checked">Show descriptions</DropdownItemCheckbox>
    <DropdownItemRadio value="list" :group-value="radio" @select="radio = $event">List view</DropdownItemRadio>
    <DropdownItemRadio value="grid" :group-value="radio" @select="radio = $event">Grid view</DropdownItemRadio>
  </DropdownMenu>
</template>

Props

Prop	Type	Default	Description
placement	'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'	'bottom-start'	Panel placement relative to trigger
disabled	boolean	false	Prevents the menu from opening

Slots

Slot	Description
trigger	The element that opens/closes the menu. Receives open: boolean as a slot prop.
default	Menu items — use DropdownItem, DropdownItemCheckbox, or DropdownItemRadio