Guides and Sample Code


macOS Human Interface Guidelines

On This Page

Changing a Menu’s Items

Sometimes it makes sense to offer a single menu that displays slightly different items depending on the user’s action. macOS supports two ways to do this: Dynamic menu items and toggled menu items.

Dynamic Menu Items

A dynamic menu item is a command that changes when the user presses a modifier key. For example, when the user opens the Window menu in the Finder and then presses the Option key, the Minimize and Zoom menu items change.

Option key not pressed

image: ../Art/dynamic1_2x.png

Option key pressed

image: ../Art/dynamic2_2x.png

Follow these guidelines if you decide to use dynamic menu items in your app.

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 a shortcut to sophisticated users. In all cases, don’t make users 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 Finder Window menu (shown above) can still minimize all open Finder windows by minimizing each one individually.

Although you can enable dynamic menu items in a contextual or Dock menu, these items can be doubly hard for users to discover. As with app menus, make sure that the functionality of the contextual or Dock menu does not depend on the discovery of dynamic menu items.

Require only a single modifier key to reveal the dynamic menu items in a menu. Users are apt to find it physically awkward to press more than one key while simultaneously opening and choosing a menu item. Also, requiring more than one additional key press greatly decreases the user’s chances of discovering the dynamic menu items.

Toggled Menu Items

A toggled menu item changes between two states each time a user chooses it. There are three types of toggled menu items:

  • A set of two menu items that indicate opposite states or actions, for example, Grid On and Grid Off. Users know which menu item is currently in effect because it displays a checkmark or it appears inactive.

  • One menu item whose name changes to reflect the current state, for example, Show Ruler and Hide Ruler.

  • A menu item that has a checkmark next to it when it is in effect, for example, a style attribute such as Bold.

Toggled menu items can be convenient, but they are rarely necessary. If you want to use toggled menu items in your app, use the following guidelines to make sure that they provide value to users.

As much as possible, display both items in a set. When users can see both states or actions at the same time, there’s less chance of confusion about each item’s effect. For example, the Mailbox menu in Mail includes both the Take All Accounts Online and Take All Accounts Offline items. When the user’s accounts are online, only the Take All Accounts Offline menu item is available, which leaves no doubt about the effect of this action.

image: ../Art/toggled_2x.png

Use a changeable menu item name if there isn’t enough room to show both items. You might also choose to use this type of toggled menu item if you’re confident that users will reopen the menu and see the opposite item. The best way to make sure that the command names are completely unambiguous is to use two verbs that express opposite actions.

For example, the commands Turn Grid On and Turn Grid Off are unambiguous. By contrast, it’s unclear what the opposite of the command Use Grid might be. Some users might expect the opposite command to be Don’t Use Grid, because they interpret the command as an action. Other users might expect to see a checkmark next to Use Grid after choosing the command, because they interpret Use Grid as a description of the current state.

For example, Mail uses changeable toggled menu items in the View menu to allow users to show or hide features such as the mailbox list and toolbar.

image: ../Art/changeable_toggled_2x.png

Use a checkmark when the toggled items represent an attribute that is currently in effect. It’s easy for users to scan for checkmarks in a list of attributes to find the ones that are in effect. For example, in the Mail Format menu, users can see at a glance which styles have been applied to the selected text.

image: ../Art/checkmark_toggled_2x.png

Don’t use a checkmark when the toggled item indicates the presence or absence of a feature. In such a case, users can’t be sure whether the checkmark means that the feature is currently in effect or that choosing the command turns the feature on.