Dropdown

A versatile and customizable dropdown component that supports both button and icon triggers, ideal for displaying contextual actions or navigation options.

Props

Prop	Type	Default	Description
label	String	''	Text label displayed on the dropdown trigger (used when type is 'button').
type	String	'button'	Defines the trigger style — either a button or an icon.
size	String	'md'	Controls the size of the dropdown trigger (sm and md).
open	Boolean	'false'	Controls the visibility of the dropdown menu.
disabled	Boolean	'false'	Disables interaction with the trigger element.
user	Object	null	Optional user data object, used for personalized dropdown content (e.g., avatar, name).
options	Array	[]	List of dropdown items, each containing label, icon, and value keys.
icon	String	''	Optional icon for the trigger when type is 'icon'.

Button Dropdown

A dropdown triggered by a button, ideal for menus, filters, and contextual actions in the UI.

<div class="flex justify-center mt-10">
  <DropdownMenu
    type="button"
    :size="'sm'"
    :open="false"
    :user="user"
    :options="options"
    @select="(opt) => console.log('Selected:', opt)"
  />
</div>

Icon Dropdown

A compact dropdown triggered by an icon, perfect for quick actions and minimalist UI layouts.

<div class="flex justify-center mt-10">
  <DropdownMenu
    type="icon"
    :size="'sm'"
    :open="false"
    :user="user"
    :options="options"
    @select="(opt) => console.log('Selected:', opt)"
  />
</div>

Avtar Dropdown

A user menu dropdown triggered by an avatar, ideal for profile and account-related actions.

<div class="flex justify-center mt-10">
  <DropdownMenu
    type="avtar"
    :size="'sm'"
    :open="false"
    :user="user"
    :options="options"
    @select="(opt) => console.log('Selected:', opt)"
  />
</div>