Vibe UI
Initializing Vibe UI System...
Vibe UI

Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add dropdown-menu button
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Examples

Explore common patterns — checkboxes, radio selection, submenus, icons, shortcuts, and avatar-triggered menus — all in one place.

Trigger Modes

Choose between standard click activation or smooth hover-to-open behavior.

Themes

Explore all style variants side-by-side.

Props

DropdownMenuContent

PropTypeDefaultDescription
variant'default' | 'retro' | 'glass''default'The aesthetic variant styling theme to apply to the dropdown menu content.
sideOffsetnumber4Distance in pixels between the trigger and the dropdown content.
side'top' | 'right' | 'bottom' | 'left''bottom'The preferred side of the trigger to render against.
align'start' | 'center' | 'end''center'Horizontal alignment of the content relative to the trigger.

DropdownMenuItem

PropTypeDefaultDescription
insetbooleanfalseAdds left padding to align with items that have leading indicators (checkbox/radio).
variant'default' | 'destructive''default'Applies destructive (danger) styling for irreversible actions like delete or logout.
disabledbooleanfalsePrevents interaction with the item and applies muted styling.

DropdownMenuSubContent

PropTypeDefaultDescription
variant'default' | 'retro' | 'glass''default'The aesthetic variant styling theme to apply to the submenu content.

DropdownMenuLabel

PropTypeDefaultDescription
insetbooleanfalseAdds left padding to visually align labels with inset menu items.

DropdownMenuSubTrigger

PropTypeDefaultDescription
insetbooleanfalseAdds left padding to align with items that have leading indicators.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Dropdown Menu | Vibe UI