Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks
On This Page

Menu Controls

Pop-Up Menu

A pop-up menu presents a list of mutually exclusive choices in a dialog or window.

image: ../Art/popup_closed_2x.png

A pop-up menu:

  • Has a double-arrow indicator

  • Contains nouns (things) or adjectives (states or attributes), but not verbs (commands)

  • Displays a checkmark to the left of the currently selected value when open

You can see most of these components in the Highlight color pop-up menu in General preferences (the double-arrow indicator isn’t completely visible because the menu is open).

image: ../Art/popup_open_2x.png

A pop-up menu behaves like other menus: Users press to open the menu and then drag to choose an item. The chosen item flashes briefly and is displayed in the closed pop-up menu. If users move the pointer outside the open menu without releasing the mouse button, the current value remains active. An exploratory press in the menu to see what’s available doesn’t select a new value.

Use a pop-up menu to present up to 12 mutually exclusive choices that users don’t need to see all the time.

Consider using a pop-up menu 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 pop-up menu to save space.

Use a pop-up menu to provide a menu of things or states. If you need to provide a menu of commands (that is, verbs), use a pull-down menu instead. Use title-style capitalization for the label of each item in a pop-up menu. To learn more about menus, see About Menus.

In general, provide an introductory label to the left of the pop-up menu (in left-to-right scripts). The label should have sentence-style capitalization For more information on this capitalization style, see Use the Right Capitalization Style in Labels and Text.

Avoid adding a submenu to an item in a pop-up menu. A submenu tends to hide choices too deeply and can be physically difficult for users to use.

Avoid using a pop-up menu to display a variable number of items. Because users must open a pop-up menu to see its contents, they should be able to rely on the contents remaining the same.

Consider using a scrolling list, instead of a pop-up menu, for a large number of items. If space is not restricted, use a scrolling list to display more than 12 items.

Don’t use a pop-up menu when more than one simultaneous selection is appropriate. For example, a list of text styles, from which users might choose both bold and italic, should not be displayed in a pop-up menu. In this situation, you should instead use checkboxes or a pull-down menu in which checkmarks appear.

In rare cases, include a command that affects the contents of the pop-up menu itself. For example, in the Print dialog, the Printer pop-up menu contains the Add Printer item, which allows users to add a printer to the menu. If users add a new printer, it becomes the menu’s default selection. If you need to add such commands to a pop-up menu, put them at the bottom of the menu, below a separator. (A separator—called a Separator Menu Item in Interface Builder—is a horizontal line.)

Ensure that all pop-up menus in a stack have the same width. Even if the visible contents of each pop-up menu varies, the width of the controls themselves should be equal.

Action Menu

An Action menu is a specific type of pop-up menu that functions as an app-wide contextual menu.

image: ../Art/action_menu_closed_2x.png

An Action menu:

  • Displays the system-provided Action image and the standard downward-pointing arrow

  • Does not display a label (because users are familiar with the meaning of the Action image)

Use an Action pop-up menu to provide a visible shortcut to a handful of useful commands. An Action menu has the advantage of a contextual menu, without the disadvantage of being hidden. You can learn more about contextual menus in Contextual Menus.

In particular, you can use an Action menu in a toolbar to replace an app-wide contextual menu. For example, in its default set of toolbar controls, the Finder includes an Action menu that performs tasks related to the currently selected item.

image: ../Art/action_menu_open_2x.png

Don’t create a custom version of the Action image. It’s essential that you use the system-provided Action image so that users understand what the control does. For more information on the system-provided images, see System-Provided Images.

Follow the guidelines for contextual menu items as you design the contents of an Action menu. For example, you should ensure that each Action menu item is also available as a menu command and avoid displaying keyboard shortcuts. For more information on the guidelines that govern contextual menus, see Contextual Menus.

Use an Action menu at the bottom of a list to provide commands that apply to items in the list. An Action menu works well beneath a list view or a source list. For example, the Action menu at the bottom of the Mail source list contains commands that act on the account or mailbox selected in the source list.

image: ../Art/action_menu_open1_2x.png

Use a gradient button to provide an Action menu at the bottom of a source list or table view. For information on gradient buttons, see Gradient Button.

Avoid placing an Action menu control anywhere else in the body of a window. An Action menu needs to be visually connected to a context, such as a list or a toolbar. An Action menu can’t replace a contextual menu that users reveal by Control-clicking anywhere in a window, because placing the Action menu in a specific area implies that it applies to that area.

Share

A Share menu is a specific type of pop-up menu that displays a list of app extensions and system services, such as AirDrop, that users can use to share content. To learn more about app extensions, see App Extensions. Users reveal a Share menu by clicking the Share button shown here.

image: ../Art/share_button_2x.png

A Share button displays the system-provided Share image. The button does not display a label because users are familiar with the meaning of the Share image.

Don’t create a custom version of the Share image. It’s essential that you use the system-provided Share image so that users understand what the control does. For more information on the system-provided images, see System-Provided Images.

Scrolling List

A scrolling list is a list that uses scroll bars to reveal its contents.

image: ../Art/scrolling_list_2x.png

A scrolling list is a single-column rectangular view of any height.

Use a scrolling list to display an arbitrarily large number of items from which users can choose. Although scrolling lists aren’t directly editable, you can implement editing functionality that allows users to provide additional list items.

In general, don’t use a scrolling list to provide choices in a limited range. A scrolling list might not display all items at once, which can make it difficult for users to grasp the scope of their choices. If you need to display a limited range of choices, a pop-up menu (described in Pop-Up Menu) might be a better choice.

Insert an ellipsis in the middle of an item that is too long to fit in the list. Inserting the ellipsis in the middle allows you to preserve the beginning and end of the item name, which tend to be more distinct and recognizable.

Consider using a striped background to help users scan a long list. For example, users can lose their place in a very long list in which most of the items look similar. In this case, it can be easier for users to scan the list and find specific items when the background is striped.

In general, provide an introductory label for a scrolling list. A label helps users understand the types of items that are available to them.

Command Pop-Down Menu

A command pop-down menu provides pull-down menu functionality within a window.

image: ../Art/command_popdown_2x.png

A command pop-down menu:

  • Always displays the same text when it’s closed, which acts as the menu title (in contrast, a closed pop-up menu displays the currently selected item). To learn more about pop-up menus, see Pop-Up Menu.

  • Contains a single, downward-pointing arrow and can display checkmarks to the left of all currently active selections.

  • Opens when users click anywhere in the control.

Avoid listing too many items in a command pop-down menu. Command pop-down menus should contain between 3 and 12 commands. The items in a command pop-down menu don't have to be mutually exclusive.

In general, don’t supply an introductory label for a command pop-down menu. The text in the control should be sufficient to tell users what they can expect to find in the menu.

Combination Box

A combination box (or combo box) provides a list of choices and allows users to specify custom choices.

image: ../Art/combo_box_2x.png

A combo box is a text entry field combined with a drop-down list. The default state of the combo box is closed, with the text field empty or displaying a default selection.

Users can type any appropriate characters into the text field. If a user types in an item already in the list, or types in a few characters that match the first characters of an item in the list, that item is highlighted when the user opens the list. A user-typed item is not added to the permanent list.

Use a combo box to give users the convenience of selecting an item from a list combined with the freedom of specifying their own custom item.

List only items that users can choose singly. A combo box does not allow multiple selections, so be sure to offer users a list of items from which they can choose only one at a time.

Display a meaningful default selection. It’s best when the default selection (which may not be the first item in the list) provides a clue to the hidden choices. It’s also a good idea to introduce a combo box with a label that helps users know what types of items to expect.

Don’t extend the right edge of the list beyond the right edge of the arrow box. If an item is too long, it’s truncated.

Display the most likely choices, even though users can enter their own. Users appreciate being able to specify custom choices, but they also appreciate the convenience of choosing from a list. For example, Safari allows users to set a preference for the minimum font size to display. In its Advanced preferences pane (shown here), Safari lists several font sizes in a combo box, and users can supply a custom font size if none of the listed choices is suitable.

image: ../Art/combo_box_open_2x.png