DropdownItem

A single clickable menu item for use inside DropdownMenu. Automatically closes the menu on click. Supports an optional description and a leading element (icon or emoji).

ExamplesCodeUsageChangelog

Basic usage

Tailwind v4

<DropdownMenu>
  <template #trigger>
    <Button variant="secondary">Menu</Button>
  </template>
  <DropdownItem>View details</DropdownItem>
  <DropdownItem>Edit record</DropdownItem>
  <DropdownItem disabled>Archive (disabled)</DropdownItem>
</DropdownMenu>

With description

Tailwind v4

<DropdownItem description="Open the full record">View details</DropdownItem>

With leading element

Tailwind v4

<DropdownItem elem-before="📂">Open</DropdownItem>
<DropdownItem elem-before="💾">Save</DropdownItem>

Props

Prop	Type	Default	Description
disabled	boolean	false	Prevents click and dims the item
description	string	—	Secondary text shown below the label
elemBefore	string	—	Text/emoji rendered before the label

Emits

Event	Payload	Description
click	—	Fired when the item is clicked (not fired when disabled)

Slots

Slot	Description
default	Item label text