Drop Down

Stable v1.0.2

A simple dropdown panel for menus or small popups. Handles positioning and closing when you click outside, so you don't have to wire that up every time.

Interactive Playground

Combine every prop live and copy the resulting code.

Align

Right

Size

Medium (md)

Explicit Width

Width Class

Live Source Code

<DropDown align="right">
  <template #trigger="{ isOpen }">
    <Button :label="isOpen ? 'Close' : 'Open'" />
  </template>

  <Button label="Profile" variant="text" severity="secondary" />
  <Button label="Logout" variant="text" severity="danger" />
</DropDown>

Basic Usage

The dropdown uses a trigger slot and exposes an isOpen state.

Template

<DropDown align="right">
  <template #trigger="{ isOpen }">
    <Button :label="isOpen ? 'Close' : 'Open'" />
  </template>

  <Button label="Profile" variant="text" severity="secondary" />
  <Button label="Logout" variant="text" severity="danger" />
</DropDown>

Alignment & Widths

Customize layout with align ("left" | "right") and width.

Template

<DropDown align="left" width="w-56">
  <Button label="Option A" variant="text" />
</DropDown>

<DropDown align="right" width="w-56">
  <Button label="Settings" variant="text" />
</DropDown>

API Reference

Props

Name	Type / Signature	Default	Description
align	"left" \| "right"	"right"	Horizontal alignment of the panel relative to the trigger.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Preset panel width (xs: w-40 ... xl: w-64). Ignored when width is set.
width	string	undefined	Explicit Tailwind width utility class for the panel, overriding size, e.g. 'w-56'.

Slots

Slot Name	Exposed Bindings	Description
trigger	{ isOpen: boolean }	The element that opens/closes the dropdown on click.
default	-	Menu content rendered inside the dropdown panel.