--- title: "Dropdown menu UI: anatomy, variants and examples | Kombai" description: "A dropdown menu opens a short list of actions or options from a button, and closes as soon as people pick one." canonical_url: https://kombai.com/glossary/dropdown-menu/ author: "The Kombai Team" --- # Dropdown menu A dropdown menu opens a short list of actions or options from a button, and closes as soon as people pick one. - Also called: dropdown, menu button, select - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/dropdown-menu/), [30 mobile designs](https://kombai.com/gallery/mobile/dropdown-menu/) - [Saltmere](https://kombai.com/gallery/inspirations/dropdown-menu-web-41/) (Web) - [Anvilore](https://kombai.com/gallery/inspirations/dropdown-menu-web-19/) (Web) - [All Items](https://kombai.com/gallery/inspirations/dropdown-menu-ios-7/) (Mobile) ## What is a dropdown menu? A dropdown menu is a floating list that opens from a button, like a ••• icon, an avatar or a Create button. It holds actions that would crowd the screen if they were all shown, or a few options to choose from. Picking an item runs it and closes the menu. - The menu floats over the page next to the button that opened it. - Related items sit in groups, with risky actions like Delete last and in red. ## When to use dropdown menu - **Secondary actions.** Rename, duplicate, export and delete for a row, a card or a page. - **Account and app menus.** Profile, settings, billing and sign out behind an avatar. - **Create menus.** One New button that offers several kinds of thing to make. ## When not to use one - **The main action.** Put the action most people need on its own button. - **Form values.** For a value that stays chosen, use a select or radio buttons. - **Site navigation.** Many grouped links across a site belong in a mega menu or a nav. ## Anatomy 1. **Trigger**: The button that opens it 2. **Menu**: The floating list 3. **Menu item**: One action, icon optional 4. **Separator**: Splits the groups 5. **Destructive item**: Last, and in red 6. **States**: Closed, open, focused, disabled ## Variants We sorted every dropdown menu design in the Kombai gallery and found five patterns. ### 1. Row action menus The default. A ••• button at the end of a row or a card opens the actions for that one item. - [Leases](https://kombai.com/gallery/inspirations/dropdown-menu-web-6/) (Web) - [My Workshop](https://kombai.com/gallery/inspirations/dropdown-menu-web-21/) (Web) - [Users](https://kombai.com/gallery/inspirations/dropdown-menu-web-4/) (Web) ### 2. Account menus An avatar in the header opens the profile, settings, plan and sign out, sometimes with a theme switch. - [Draftline Strap-Back Bra](https://kombai.com/gallery/inspirations/dropdown-menu-web-16/) (Web) - [Emmerloft](https://kombai.com/gallery/inspirations/dropdown-menu-web-40/) (Web) - [Crevane](https://kombai.com/gallery/inspirations/dropdown-menu-web-28/) (Web) ### 3. Create menus A New or plus button opens the kinds of thing people can make, often with an icon and a one-line description each. - [Hourglade](https://kombai.com/gallery/inspirations/dropdown-menu-web-8/) (Web) - [Add-section menu](https://kombai.com/gallery/inspirations/dropdown-menu-ios-25/) (Mobile) - [Awlgrove](https://kombai.com/gallery/inspirations/dropdown-menu-web-47/) (Web) ### 4. Menus with shortcuts and submenus Dense menus in work tools that show each keyboard shortcut and tuck related actions into a submenu. - [Thalwen](https://kombai.com/gallery/inspirations/dropdown-menu-web-29/) (Web) - [Stavora](https://kombai.com/gallery/inspirations/dropdown-menu-web-37/) (Web) - [Tuyerra](https://kombai.com/gallery/inspirations/dropdown-menu-web-20/) (Web) ### 5. Sort and choice menus A short list of options with a check next to the current one, for sorting, a quantity or a style. - [Bellrose](https://kombai.com/gallery/inspirations/dropdown-menu-ios-5/) (Mobile) - [streaming app](https://kombai.com/gallery/inspirations/dropdown-menu-ios-22/) (Mobile) - [Tickets](https://kombai.com/gallery/inspirations/dropdown-menu-ios-14/) (Mobile) ## Where dropdown menus show up ### Tables and records View options, sheet actions and bulk exports above a table, out of the way until needed. - [Accounts](https://kombai.com/gallery/inspirations/dropdown-menu-web-1/) (Web) - [Sigillara](https://kombai.com/gallery/inspirations/dropdown-menu-web-24/) (Web) - [Petiora](https://kombai.com/gallery/inspirations/dropdown-menu-web-9/) (Web) ### AI composers A plus button in the prompt box that offers to upload a file, pick from a library or start a kind of output. - [Orlyn](https://kombai.com/gallery/inspirations/dropdown-menu-web-14/) (Web) - [Selvara](https://kombai.com/gallery/inspirations/dropdown-menu-web-12/) (Web) - [Conversation](https://kombai.com/gallery/inspirations/dropdown-menu-ios-11/) (Mobile) ### Mobile overflow menus A ••• button on a phone screen opens the less common actions for the route, chat or profile on screen. - [Brackenway](https://kombai.com/gallery/inspirations/dropdown-menu-ios-1/) (Mobile) - [Coppermint Assistant](https://kombai.com/gallery/inspirations/dropdown-menu-ios-2/) (Mobile) - [Fernly](https://kombai.com/gallery/inspirations/dropdown-menu-ios-10/) (Mobile) ### Filters Filter menus with checkboxes, radio options or grouped sort and status settings over a list. - [Ironvale](https://kombai.com/gallery/inspirations/dropdown-menu-ios-15/) (Mobile) - [Northvane](https://kombai.com/gallery/inspirations/dropdown-menu-ios-20/) (Mobile) - [Firnholt](https://kombai.com/gallery/inspirations/dropdown-menu-web-27/) (Web) ## Dropdown menu vs similar components | | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Context menu](https://kombai.com/glossary/context-menu/) | [Mega menu](https://kombai.com/glossary/mega-menu/) | [Action sheet](https://kombai.com/glossary/action-sheet/) | |---|---|---|---|---| | Opens from | A visible button | Right-click or long-press | A main navigation link | A button on a phone | | Holds | Actions or a few options | Actions for one item | Many grouped links | A few actions, full width | | Best for | Overflow actions and choices | Shortcuts for power users | Large sites with many sections | One-thumb use on mobile | ## Build notes - Make the trigger a