A menu reveals its options when people interact with it, making it a space-efficient way to present commands in your app or game. Menus are ubiquitous throughout the interface, so most people already know how to use them. When you use menus consistently in your app or game, it can help make your experience feel familiar and easy to learn. The system provides several types of menus that support different use cases, such as:
Regardless of type, all menus list one or more menu items, each of which represents a command, option, or state that affects the current selection or context. When people choose a menu item, the action occurs and the menu typically closes. LabelsEach menu item displays text to describe its action and may include a symbol or interface icon to clarify meaning. In addition to text and symbols, a menu item can also display the characters people type to perform the associated keyboard shortcut, if there is one. Unlike most other types of menus, a context menu doesn’t display keyboard shortcuts because it already provides a quick way to get task-specific actions. To help people understand what a menu item does, write a label that clearly and succinctly describes it. Depending on the item you’re describing, consider the following guidance:
For consistent labels, adopt a condensed style that doesn't include articles, and use title-style capitalization. In English, the articles a, an, and the always lengthen labels, but rarely enhance understanding. For example, when people want to open a message in Mail, they understand that the Open Message menu item refers to the currently selected message, so adding an article to the label — such as Open the Message — doesn't help clarify the item's action. Append an ellipsis to a menu item’s label when people need to provide additional information before the action can complete. The ellipsis character (…) signals that another view will open in which people can input information or make choices. Show people when a menu item is unavailable. An unavailable menu item often appears dimmed and doesn’t respond to interactions. If all of a menu’s items are unavailable, ensure that the menu itself remains enabled so people can open it and learn about the commands it contains. Toggled itemsWhen you need to help people switch an item or attribute between two states, you can support toggling in one of the following three ways:
Consider using changeable titles to shorten a long list of items that show and hide features. For example, the View menu in Mail uses changeable titles to Show or Hide the Tab Bar, Mailbox List, Toolbar, or Favorites Bar. Use a changeable label when there isn't enough room to list a pair of menu items. When necessary to make sure both titles are unambiguous, consider using two verbs that clearly express opposite actions, like Turn Grid On and Turn Grid Off. Consider using a checkmark when a toggled item represents an attribute that’s currently in effect. It’s easy for people to scan for checkmarks in a list of attributes to find the ones that are in effect. For example, in the standard Format > Font menu, checkmarks can make it easy for people notice the styles that apply to selected text. Consider offering a menu item that makes it easy to remove multiple toggled attributes. For example, if you let people apply several styles to selected text, it can work well to provide a menu item — such as Plain — that removes all applied formatting attributes at one time. Consider displaying a pair of menu items instead of one toggled menu item if it adds clarity. Sometimes, it helps people to view both actions or states at the same time. The Mailbox menu in Mail, for example, includes both the Take All Accounts Online and Take All Accounts Offline items, so when someone's accounts are online, only the Take All Accounts Offline menu item appears enabled. OrganizationTo help people find the item they’re looking for, you can organize menu items according to frequency of use, object importance, functional categories, or another prioritization scheme that fits the way people use your app. Sometimes, it makes sense to group logically related items within a menu, such as the editing commands Copy, Cut, and Paste. To help people visually distinguish groups, you use a separator. Depending on the platform and type of menu, a separator appears between groups as a horizontal line or a short gap in the menu’s background appearance. List menu items according to your prioritization scheme. People tend to start scanning a menu from the top, so listing high-priority items and groups first often means that people can find what they want without scanning the entire menu. Avoid letting your prioritization scheme separate a group of commands that are logically related, even if the commands don’t all have the same priority. For example, people generally use Paste and Match Style much less often than they use Paste, but they expect to find both commands in the same group that contains other related editing actions like Copy and Cut. Be mindful of menu length. People need more time and attention to read a long menu, which means they may miss the command they want. If a menu is long, you might need to break it into separate menus. In some cases, you can use a submenu to shorten the list. The exception is a menu that contains user-defined or dynamically generated content, such as the History and Bookmarks menus in Safari. In this situation, people expect the menu to accommodate the items they add to it, so a long menu is fine, and scrolling is acceptable. Sometimes, a menu item can reveal a set of closely related items in a subordinate list called a submenu. In this case, a menu item indicates the presence of a submenu by displaying a symbol — like a chevron — after its label. Use submenus sparingly. Each submenu adds complexity to the interface and hides the items it contains. You might consider creating a submenu when a term appears in more than two menu items in the same group. 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. In a case like this, it generally works well to use the repeated term in the submenu label to help people predict what it contains. Limit the depth and length of submenus. It can be difficult for people to reveal multiple levels of hierarchical submenus, so it’s generally best to restrict them to a single level. Also, if a submenu contains more than about five items, consider creating a new menu. Keep a submenu enabled even when its nested menu items are unavailable. A submenu item — like all menu items — needs to let people open it and learn about the commands it contains. Prefer using a submenu to indenting menu items. Using indentation is inconsistent with the system and doesn’t clearly express the relationships between the menu items. No additional considerations for iOS, iPadOS, macOS, tvOS, or watchOS. ResourcesRelated
Developer documentation
Videos
|