Dropdown Menu
A dropdown menu is a floating action list that opens from a trigger — a button, icon, or avatar — and presents commands the user can run without leaving the page. Choosing an item typically performs an action and closes the menu.
The pattern is on-demand commands: use when related actions should stay out of the way until needed. Unlike a select, a dropdown menu does not commit a form value; it triggers behavior (navigate, edit, delete, share).
Also known as
- Popup menu
- Kebab menu — ⋮ icon trigger for row or card actions
- Meatball menu — ⋯ icon trigger for row or card actions
Component Anatomy
Common use cases
Use a dropdown menu when the user needs a compact set of actions near a control or content item:
- Account and app chrome — profile, settings, theme, sign out
- Overflow actions — more options on a toolbar, table row, or card
- File and document commands — share, duplicate, download, rename
- Grouped operations — team invites, export formats, nested “Invite users” flows
- Destructive actions — delete or archive, often marked with a danger style
Avoid a dropdown menu when the choice is a form value that should persist as a field (use a select or radio group), when there are only one or two primary actions that deserve always-visible buttons, or when users need to compare options side by side. Do not use it for long, search-heavy catalogs — prefer a command palette or combobox. Right-click-only actions belong in a context menu, not a dropdown trigger.
Default menus list plain items with optional shortcuts. Checkbox and radio item variants let the menu carry toggles or exclusive choices (view density, sort order) without leaving the panel. Submenus nest secondary actions; keep nesting shallow so keyboard and touch users can still navigate comfortably.