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.
When 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 three types of menu in macOS, each of which has a specific use case, as noted in the following table:
|Menu bar menu||Exposes app-specific menu items when chosen from 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 (or shortcut 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 Show in Finder) and app-specific menu items (like Compose New Message) when Control-clicking an app’s Dock icon. See Dock Menus.|
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 for the titles to be accurate and informative.
Use title-style capitalization. Title-style capitalization is used consistently for menu and menu item titles throughout the system. For more information, see Apple Style Guide.
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.
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 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. Menu items that have a submenu include a triangle to differentiate them from menu items that don't have submenus. When the user highlights (or uses the keyboard to select) a menu item with a triangle, the submenu appears alongside its parent menu.
Limit the use of submenus. Every submenu adds a layer of complexity and hides menu items from the user. 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 Format menu in Pages has a Font submenu that includes menu items for enabling and disabling text attributes, such as 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 menus and 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 express relationships between menu items. If you need to indent, then a submenu is a better choice.
Organizing Menu Items
Organize menu items to help people locate commands.
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.
Place the most frequently used items at the top of a menu. When users click to open a menu, their focus is on the top area of that menu. Placing the most used items at the top of the menu ensures that people will always find the item they’re looking for. 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, the Find Next command typically appears beneath the 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).
Make it easy for people to locate menu items by grouping similar actions together. For example, the Arrange menu in Numbers includes groups for aligning and distributing objects, as well as items for Group and Ungroup.
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 separate menu items for 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 create a new menu. Groups of related items sometimes call for the use of a submenu. See Submenus.
Don’t intentionally design a scrolling menu. Scrolling menus have items that extend beyond the top or bottom edge of the screen. Scrolling menus are acceptable when a menu contains user-defined or dynamically generated content. For example, the History and Bookmarks menus in Safari may have scrolling submenus. The History menu includes submenus for websites visited on specific days; the length of the Bookmarks submenus depends on how the user has organized their favorite websites. A scrolling menu displays a downward or upward triangle at its bottom or top 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 menu item is dynamic when its behavior changes with the addition of a modifier key (Control, Option, Shift, or Command). For example, the Minimize item in the Window menu 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. For example, a user who hasn’t discovered the Minimize All dynamic menu item in the Window menu can still minimize open windows.
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 dynamic menu items.
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 (known as favicons) to produce a visual connection between the webpage and the menu item for that webpage.
Minimize the use of icons. Use icons in menus only when they add significant value. A menu that includes too many icons may appear cluttered and be difficult to read.
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.
Using Symbols in Menus
The following table lists some standard symbols for providing extra 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. Using nonstandard symbols introduces visual clutter and could confuse the user.
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 next to every style currently in effect. It's acceptable to 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 if the user's 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 a diamond. If an active window has unsaved changes, its menu item should have a checkmark next to it.
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.