Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Dropdown Menu
A versatile menu triggered by a button that supports items, groups, checkboxes, keyboard shortcuts, and full keyboard navigation. Use for action menus, option selectors, and any contextual menu triggered by explicit user interaction.
Default
A basic
DropdownMenu with a DropdownMenuTrigger button, a DropdownMenuLabel for section headings, DropdownMenuSeparator dividers, and DropdownMenuItem entries. Click the trigger to open the menu, then click an item or press Escape to close it.
Loading example…
With Icons
Use the
Icon render fragment on DropdownMenuItem to add visual icons alongside menu text. The component handles spacing automatically. Apply text-destructive to the item to style dangerous actions like log out.
Loading example…
With Shortcuts
Use
DropdownMenuShortcut inside a DropdownMenuItem to display keyboard shortcut hints alongside menu items. These are purely visual hints; for functional keyboard shortcuts that work globally, use the KeyboardShortcutService separately.
Loading example…
With Groups
Use
DropdownMenuGroup with DropdownMenuLabel and DropdownMenuSeparator to organize menu items into labeled sections.
Loading example…
Disabled Items
Set
Disabled to true on a DropdownMenuItem to make it non-interactive and visually muted. Disabled items are skipped during keyboard navigation and have pointer-events-none and reduced opacity-50 to clearly communicate their unavailable state.
Loading example…
Checkbox Items
Use
DropdownMenuCheckboxItem with @bind-Checked to create toggle menu items that maintain checked state. By default, checkbox items do not close the menu on toggle (unlike regular items), allowing users to change multiple settings in one interaction. Set CloseOnSelect="true" to override this behavior.
Loading example…
Custom Variant
Use the
Class parameter on DropdownMenuContent to apply custom Tailwind CSS for project-specific styling. This example uses custom background and border colours to create a branded menu that matches your design system.
Loading example…