# Dropdown menu

> A dropdown menu is a list that opens from a visible control to pick an option or run a command. iOS splits it into a pop-up button for options and a pull-down button for commands, and Material 3 has a dropdown menu.

Page: https://www.appetiteui.com/glossary/dropdown-menu. Dropdown menu: iOS pop-up and pull-down button vs Material 3. Also called Pop-up button, Pull-down button, Select, Overflow menu.

## Why it matters

One name hides two jobs. A pop-up button picks one of several mutually exclusive options and shows the choice; a pull-down button offers commands related to its action. Mixing them confuses what the label means.

A visible control opens it, unlike a context menu, which hides behind a long press.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Pop-up button and pull-down button | Dropdown menu | DropdownMenu |
| Menu in the file | 238 wide at radius 32, 3, 4 or 5 items | None in the file, Compose DropdownMenu | See below |
| Elevation (Material Components) | Glass material | 3 dp popup elevation | See below |

## In Appetite UI

DropdownMenu adds a title row, a description line and a Checked state; rows are 56 tall against 40 on iOS. Only Popover anchors to any control and shows no preview.

## Example

A Sort button opens a menu with Newest, Oldest and Price, with a check on the current one; on iOS that is a pop-up button, and the button shows the choice.

## Common mistakes

- Using a menu for two options. Use a segmented control or a toggle.
- Not showing the current choice in the button.
- Commands and options mixed in one list.
- Long labels that wrap. Keep them short.

## Questions

### What is the difference between a pop-up button and a pull-down button on iOS?

A pop-up button presents mutually exclusive options and updates to show the choice. A pull-down button presents commands related to its action, and the menu closes when one runs.

### What is the difference between a dropdown menu and a context menu?

A dropdown menu opens from a visible control. A context menu opens from a long press on an item and acts on that item.

## Sources

1. [Apple Human Interface Guidelines: Pop-up buttons](https://developer.apple.com/design/human-interface-guidelines/pop-up-buttons)
2. [Apple Human Interface Guidelines: Pull-down buttons](https://developer.apple.com/design/human-interface-guidelines/pull-down-buttons)
3. [Material Design 3: Menus](https://m3.material.io/components/menus/overview)
4. [Material Components for Android: Menu](https://github.com/material-components/material-components-android/blob/master/docs/components/Menu.md)

## Related

- Docs: [Dropdown](https://www.appetiteui.com/docs/dropdown)
- Docs: [Context Menu](https://www.appetiteui.com/docs/context-menu)
- Glossary: [Context menu](https://www.appetiteui.com/glossary/context-menu)
- Glossary: [Segmented control](https://www.appetiteui.com/glossary/segmented-control)
- Glossary: [Action sheet](https://www.appetiteui.com/glossary/action-sheet)