A menu presents a list of items—commands, attributes, or states—from which a user can choose. An item within a menu is known as a menu item, and may be configured to initiate an action, toggle a state on or off, or display a submenu of additional menu items when selected or in response to an associated keyboard shortcut. Menus can also include separators, and menu items can contain icons and symbols like checkmarks. By default, all menus adopt translucency.
Once a menu is displayed onscreen, it remains open until the user chooses a menu item, navigates to another menu, clicks outside of the menu, switches to another app, or quits the app; or until the system displays an alert.
Types of Menus
There are several varieties of menu in macOS.
|Type of menu||Description|
|Menu bar menu||Exposes app-specific menu items when clicked in the menu bar at the top of the screen. An app typically displays several menus in the menu bar. See Menu Bar Menus.|
|Contextual menu||Exposes menu items related to the user’s current context. A contextual menu is displayed by Control-clicking a view or selected element in an app. See Contextual Menus.|
|Dock menu||Exposes system-defined menu items (like Reveal in Finder) and app-specific menu items (like New Document) when Control-clicking an app’s Dock icon. See Dock Menus.|
Tip A pop-up button, often referred to as a pop-up menu, is a type of button that displays a menu of choices when clicked. See Pop-Up Buttons.
Menu and Menu Item Titles
A title describes a menu or menu item. People navigate menus and choose menu items based on their titles, so it’s important that titles be accurate and informative.
Use title-style capitalization. This style is used consistently for menus and menu item titles throughout the system.
A menu title describes the contents of the menu.
Provide intuitive menu titles. A menu title should help people anticipate the types of items the menu contains. For example, you would expect a menu titled Font to include options for adjusting text attributes, not performing editing activities like copying and pasting.
Keep menus enabled even when menu items are unavailable. It’s important for people to be able to browse the contents of all menus to learn where commands reside, even when those commands aren’t available.
Make menu titles as short as possible without sacrificing clarity. One-word menu titles are best because they take up very little space in the menu bar and are easy to scan. If you must use more than one word in a menu title, use title-style capitalization.
Use text, not icons, for menu titles. Only menu bar extras use icons to represent menus. See Menu Bar Extras. It’s also not acceptable to use a mixture of text and icons in menu titles.
Menu Item Titles
A menu item title describes an action or attribute.
Use verbs and verb phrases for menu items that initiate actions. Describe the action that occurs when the menu item is chosen, such as Print or Copy.
Use adjectives or adjective phrases for menu items that toggle attribute states. Describe the attribute the menu item affects. Adjectives appearing in menu item titles imply an action and can often fit into the sentence “Change the selected object to …”—for example, Bold or Italic.
Refrain from using articles in menu item titles. For example, use Add Account instead of Add an Account, or Hide Toolbar instead of Hide the Toolbar. Articles rarely add value because the user has already made a selection or entered a specific context. Use this style consistently in all menu item names.
Use an ellipsis whenever choosing a menu item requires additional input from the user. The ellipsis character (…) means a dialog or separate window will open and prompt the user for more information or to make a choice.
Disable unavailable menu items. A disabled menu item helps people understand that an item is unavailable because, for example, it doesn’t apply to the current selection or context. A disabled menu item appears gray and doesn’t highlight when the pointer moves over it.
Consider assigning keyboard shortcuts to frequently used menu items in the menu bar. A keyboard shortcut, like Command-C for Copy, lets people quickly invoke the menu item anytime using a simple keystroke. Keyboard shortcuts aren’t used in contextual menus or Dock menus.
A submenu is a menu item that operates as a menu, displaying a set of nested items when selected. Submenus let you construct hierarchical menus that group related commands together in order to keep menus organized and intuitive. For example, the Edit menu often includes Find, Spelling and Grammar, Substitutions, Transformations, and Speech submenus, each of which contains menu items that are helpful when editing text. Submenus include a triangular indicator that differentiates them from normal menu items and alludes to the additional items. A user doesn’t select a submenu. Instead, they position the pointer over the submenu or navigate to the submenu using the keyboard to display its contents.
Limit the use of submenus. Every submenu adds a layer of complexity and hidden menu items to your menus. Reserve submenus for when you have groups of closely related commands that can be intuitively grouped under a single parent menu item, or when you need to reduce the length of your menus.
Limit the depth and length of submenus. If you must include submenus, restrict them to a single level. If a submenu contains more than five items, consider giving it its own menu.
Make sure the menu items within a submenu are logically related. In general, submenus work best for menu items that toggle attributes on and off rather than initiate actions. For example, the Font submenu in the Format menu typically includes menu items for enabling and disabling text attributes like bold, italic, and underline.
Provide an intuitive submenu title. Provide a succinct, descriptive title that hints at the menu items the submenu contains. For guidance, see Menu and Menu Item Titles.
Keep submenus enabled even when their nested menu items are unavailable. It’s important for people to be able to browse the contents of submenus to learn where commands reside, even when those commands aren’t available.
Use a submenu instead of indenting menu items. Indentation results in an inconsistent interface and doesn’t clearly express relationships between menu items. If you need to indent, then a submenu is a better choice.
Organizing Menu Items
Menu items should be logically organized to help people locate commands quickly.
Use separator lines to create visually distinct groups of related menu items. The number of groups to provide is partly an aesthetic decision and partly a usability decision.
In general, place the most frequently used items at the top of a menu. This tends to be the most visible part of a menu because people are usually looking at the menu title when the menu is displayed. At the same time, avoid arranging an entire menu based on frequency of use. It’s better to create groups of related items and place the more frequently used groups above the less frequently used groups. For example, although the Find Next command might be used infrequently, it typically appears right below the frequently used Find command.
Create separate groups for menu items that initiate actions and menu items that set attributes. Menu items become unpredictable when the behavior of grouped items varies.
Group interdependent menu items that set attributes. People expect to find related attribute menu items together. For example, when setting font attributes, it makes sense to see the menu items for applying bold, italic, and underline grouped together. Within a group, attribute menu items can be mutually exclusive (the user can select only one item, like an alignment) or independent (the user can select multiple items, like bold and italic).
Group menu items that initiate related actions. It's easier for people to locate menu commands for interacting with objects—like smart folders, shapes, and text—when the commands are found together. For example, the Arrange menu in Numbers includes separate groupings for actions related to things like object positioning, alignment, and grouping.
Look for opportunities to consolidate related menu items. If a term is used more than twice within a group of menu items, consider dedicating a separate menu or submenu to the term. For example, instead of offering commands like Sort By Date, Sort by Subject, and Sort by Unread, the View menu in Mail includes a Sort By submenu that contains items like Date, Subject, and Unread.
Be mindful of menu length. In general, long menus are difficult to scan and can be overwhelming. If a menu becomes too long, try redistributing its items. See if some items fit naturally in other menus or if it makes sense to start a new menu. Groups of related items sometimes call for the use of a submenu. See Submenus.
Don’t intentionally design a scrolling menu. A scrolling menu is a menu whose items extend beyond the top or bottom edge of the screen. Scrolling menus are generally acceptable only when a menu contains user-defined or dynamically generated content. For example, submenus within the Bookmarks and History menus in Safari may allow scrolling, depending on the quantity of the user’s bookmarks and browsing history. A scrolling menu displays an upward or downward triangular icon at its top and bottom edges to hint at scrollable offscreen content.
Variable Menu Items
Sometimes it makes sense for a menu to display slightly different items based on a user action. macOS supports two ways to do this: dynamic menu items and toggled menu items.
Dynamic Menu Items
A dynamic menu item changes when a modifier key (Control, Option, Shift, or Command). For example, the Minimize item in the Window menu usually changes to Minimize All when pressing the Option key.
Avoid making a dynamic menu item the only way to accomplish a task. Dynamic menu items are hidden by default, so they’re an appropriate way to offer shortcuts to advanced features. However, don’t make people discover a dynamic menu item before they can use your app effectively. For example, a user who hasn’t discovered the Minimize All dynamic menu item in the Window menu can still minimize open windows individually.
Use dynamic menu items primarily in menu bar menus. Although you can add dynamic menu items to contextual and Dock menus, these items can be doubly hard for users to discover.
Require only a single modifier key to reveal dynamic menu items. It’s physically awkward to press more than one key while simultaneously opening and choosing a menu item. Also, requiring more than one key press greatly reduces discoverability.
Tip macOS automatically sets the width of a menu to hold the widest item, including Option-enabled commands.
Using Icons in Menus
Sometimes, icons can be used to help people recognize menu items—not menus—and associate them with content. For example, Safari uses the icons displayed by some webpages to produce a visual connection between the webpage and the menu item for that webpage.
Always pair an icon with text in a menu item. Even when using an icon you think people will recognize, it’s best to reinforce the icon’s meaning with a textual title. Above all, make sure the use of icons doesn’t cause confusion or ambiguity.
Use familiar icons. Use an icon to represent something the user can associate with specific functionality or content. For example, the Finder displays icons in the Go menu so users can associate menu items with the icons they see in the Finder sidebar.
Minimize the use of icons. Use icons in menus only when they add significant value. A menu that includes too many icons appears cluttered and is hard to read.
Using Symbols in Menus
There are some standard symbols you can use to provide additional information in menus.
|Checkmark||In the Window menu, the active document; in other menus, an attribute that applies to the entire selection.|
|Dash||An attribute that applies to only part of the selection.|
|Bullet||A window with unsaved changes (typically, when Auto Save is not available).|
|Diamond||In the Window menu, a document that is currently minimized in the Dock.|
Avoid using custom symbols in menus. People are familiar with the standard symbols and additional symbols tend to add visual clutter.
Use a checkmark to indicate that something is currently active. You can use checkmarks within groupings of mutually exclusive attributes (the user can select only one item, such as font size) or independent attributes (the user can select multiple items, such as bold and italic).
Use a dash to indicate that an attribute applies to only part of the selection. For example, if the selected text has two styles applied to it, you can put a dash next to each style name. Or, you can display a checkmark to every style currently in effect. When appropriate, you can combine checkmarks and dashes in the same menu.
Use a bullet only when Auto Save isn’t available. With Auto Save, people shouldn't have to think about the saved state of their documents. A bullet may still be warranted, however, if Auto Save can’t complete, such as because the disk is full.
Let the diamond and checkmark symbols override other symbols. A menu item should have a single symbol. For example, the menu item for a minimized window with unsaved changes should have only a diamond. The menu item for an active window with unsaved changes should have only a checkmark.
Styling Menu Items
Use styling only in a Font or Style menu. If your app includes a Font or Style menu, you can display menu items in the actual fonts or styles that are available so people can preview the effects of the menu items. Don’t use styling in other menus.