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.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.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.With Groups
Use
DropdownMenuGroup with DropdownMenuLabel and DropdownMenuSeparator to organize menu items into labeled sections.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.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.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.Submenus and Radio Items
BbDropdownMenuSub groups a trigger and a nested panel. Bind the radio group to keep one option selected. Arrow keys enter and leave the submenu; selecting a radio item closes the menu by default.