A pop-up button (often referred to as a pop-up menu) is a type of button that, when clicked, displays a menu containing a list of mutually exclusive choices. A pop-up button includes a double-arrow indicator that alludes to the direction in which the menu will appear, which is over the button itself. Like other types of menus, a pop-up button’s menu can include separators and symbols like checkmarks. Once the menu is displayed onscreen, it remains open until the user chooses a menu item, clicks outside of the menu, switches to another app, or quits the app; or until the system displays an alert.
In general, use a label to introduce a pop-up button. The label should utilize sentence-style capitalization and end with a colon.
Use a pop-up button to present a list of things or states, not commands. Use title-style capitalization for the title of each menu item within a pop-up button’s menu. If you need to provide a list of commands, use a pull-down button instead. See Pull-Down Buttons.
Display a reasonable default selection. When closed, a pop-up button displays the selected item. If the user hasn’t chosen an item yet, it’s generally best to select a default item—the item most likely to be chosen by the user.
Restrict the menu of a pop-up button to a single level. Submenus hide choices too deeply and are difficult to navigate.
Use a pop-up button to present a static list of choices. Because a pop-up button must be opened to see its contents, people should be able to rely on its consistency.
Consider using a pop-up button as an alternative to other types of selection controls. For example, if you have a dialog that contains a set of six or more radio buttons, you might consider replacing them with a single pop-up button to save space.
If space isn’t restricted, consider using a single-column table view instead of a pop-up button to present more than twelve choices. Long lists are generally easier to navigate using a table view, which supports scrolling and can’t be inadvertently dismissed.
Use checkboxes or a pull-down button instead of a pop-up button to allow multiple selections. For example, a list of text styles that lets the user choose both bold and italic shouldn’t be presented using a pop-up button.
If applicable, include customization options at the bottom of the pop-up button’s menu. For example, in the Print dialog, the Printer pop-up button’s menu includes options for adding a printer and configuring printer preferences. If your pop-up button requires similar customization options, put them at the bottom of the menu below a separator line. If the user adds a new item to a pop-up button’s menu, the new item should become selected.
Try to make multiple stacked pop-up buttons the same width within a view. Even if the visible contents of each pop-up button varies, the width of the controls themselves should ideally be equal.