--- title: The menu bar framework: design role: article path: design/human-interface-guidelines/the-menu-bar --- # The menu bar On a Mac or an iPad, the menu bar at the top of the screen displays the top-level menus in your app or game. ## Anatomy Mac users are very familiar with the macOS menu bar, and they rely on it to help them learn what an app does and find the commands they need. To help your app or game feel at home in macOS, it’s essential to provide a consistent menu bar experience. Menu bar menus on iPad are similar to those on Mac, appearing in the same order and with familiar sets of menu items. When you adopt the menu structure that people expect from their experience on Mac, it helps them immediately understand and take advantage of the menu bar on iPad as well. Keyboard shortcuts in iPadOS use the same patterns as in macOS. For guidance, see Standard keyboard shortcuts. Menus in the menu bar share most of the appearance and behavior characteristics that all menu types have. To learn about menus in general — and how to organize and label menu items — see Menus. Anatomy When present in the menu bar, the following menus appear in the order listed below. YourAppName (you supply a short version of your app’s name for this menu’s title) File Edit Format View App-specific menus, if any Window Help In addition, the macOS menu bar includes the Apple menu on the leading side and menu bar extras on the trailing side. See macOS for guidance. Best practices Support the default system-defined menus and their ordering. People expect to find menus and menu items in an order they’re familiar with. In many cases, the system implements the functionality of standard menu items so you don’t have to. For example, when people select text in a standard text field, the system makes the Edit > Copy menu item available. Always show the same set of menu items. Keeping menu items visible helps people learn what actions your app supports, even if they’re unavailable in the current context. If a menu bar item isn’t actionable, disable the action instead of hiding it from the menu. Represent menu item actions with familiar icons. Icons help people recognize common actions throughout your app. Use the same icons as the system to represent actions such as Copy, Share, and Delete, wherever they appear. For a list of icons that represent common actions, see Standard icons. For additional guidance, see Menus. Support the keyboard shortcuts defined for the standard menu items you include. People expect to use the keyboard shortcuts they already know for standard menu items, like Copy, Cut, Paste, Save, and Print. Define custom keyboard shortcuts only when necessary. For guidance, see Standard keyboard shortcuts. Prefer short, one-word menu titles. Various factors — like different display sizes and the presence of menu bar extras — can affect the spacing and appearance of your menus. One-word menu titles work especially well in the menu bar because they take little space and are easy for people to scan. If you need to use more than one word in the menu title, use title-style capitalization. App menu The app menu lists items that apply to your app or game as a whole, rather than to a specific task, document, or window. To help people quickly identify the active app, the menu bar displays your app name in bold. The app menu typically contains the following menu items listed in the following order. | | | | | | | | | | | | | | | | | | Display the About menu item first. Include a separator after the About menu item so that it appears by itself in a group. File menu The File menu contains commands that help people manage the files or documents an app supports. If your app doesn’t handle any types of files, you can rename or eliminate this menu. The File menu typically contains the following menu items listed in the following order. | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Edit menu The Edit menu lets people make changes to content in the current document or text container, and provides commands for interacting with the Clipboard. Because many editing commands apply to any editable content, the Edit menu is useful even in apps that aren’t document-based. Determine whether Find menu items belong in the Edit menu. For example, if your app lets people search for files or other types of objects, Find menu items might be more appropriate in the File menu. The Edit menu typically contains the following top-level menu items, listed in the following order. | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Format menu The Format menu lets people adjust text formatting attributes in the current document or text container. You can exclude this menu if your app doesn’t support formatted text editing. The Format menu typically contains the following top-level menu items, listed in the following order. | | | View menu The View menu lets people customize the appearance of all an app’s windows, regardless of type. important: The View menu doesn’t include items for navigating between or managing specific windows; the Window menu provides these commands. Provide a View menu even if your app supports only a subset of the standard view functions. For example, if your app doesn’t include a tab bar, toolbar, or sidebar, but does support full-screen mode, provide a View menu that includes only the Enter/Exit Full Screen menu item. Ensure that each show/hide item title reflects the current state of the corresponding view. For example, when the toolbar is hidden, provide a Show Toolbar menu item; when the toolbar is visible, provide a Hide Toolbar menu item. The View menu typically contains the following top-level menu items, listed in the following order. | | | | | | | App-specific menus Your app’s custom menus appear in the menu bar between the View menu and the Window menu. For example, Safari’s menu bar includes app-specific History and Bookmarks menus. Provide app-specific menus for custom commands. People look in the menu bar when searching for app-specific commands, especially when using an app for the first time. Even when commands are available elsewhere in your app, it’s important to list them in the menu bar. Putting commands in the menu bar makes them easier for people to find, lets you assign keyboard shortcuts to them, and makes them more accessible to people using Full Keyboard Access. Excluding commands from the menu bar — even infrequently used or advanced commands — risks making them difficult for everyone to find. As much as possible, reflect your app’s hierarchy in app-specific menus. For example, Mail lists the Mailbox, Message, and Format menus in an order that mirrors the relationships of these items: mailboxes contain messages, and messages contain formatting. Aim to list app-specific menus in order from most to least general or commonly used. People tend to expect menus in the leading end of a list to be more specialized than menus in the trailing end. Window menu The Window menu lets people navigate, organize, and manage an app’s windows. important: The Window menu doesn’t help people customize the appearance of windows or close them. To customize a window, people use commands in the View menu; to close a window, people choose Close in the File menu. Provide a Window menu even if your app has only one window. Include the Minimize and Zoom menu items so people using Full Keyboard Access can use the keyboard to invoke these functions. Consider including menu items for showing and hiding panels. A Panels provides information, configuration options, or tools for interacting with content in a primary window, and typically appears only when people need it. There’s no need to provide access to the font panel or text color panel because the Format menu lists these panels. The Window menu typically contains the following top-level menu items, listed in the following order. | | | | | | | | | | | | | | | | | | | | Help menu The Help menu — located at the trailing end of the menu bar — provides access to an app’s help documentation. When you use the Help Book format for this documentation, macOS automatically includes a search field at the top of the Help menu. | | | | | | | | For guidance, see Offering help; for developer guidance, see NSHelpManager. Dynamic menu items In rare cases, it can make sense to present a dynamic menu item, which is a menu item that changes its behavior when people choose it while pressing a modifier key (Control, Option, Shift, or Command). For example, the Minimize item in the Window menu changes to Minimize All when people press 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 best suited to offer shortcuts to advanced actions that people can accomplish in other ways. For example, if someone hasn’t discovered the Minimize All dynamic menu item in the Window menu, they can still minimize each open window. Use dynamic menu items primarily in menu bar menus. Adding a dynamic menu item to contextual or Dock menus can make the item even harder for people to discover. Require only a single modifier key to reveal a dynamic menu item. It can be physically awkward to press more than one key while simultaneously opening a menu and choosing a menu item, in addition to reducing the discoverability of the dynamic behavior. For developer guidance, see isAlternate. tip: macOS automatically sets the width of a menu to hold the widest item, including dynamic menu items. Platform considerations Not supported in iOS, tvOS, visionOS, or watchOS. iPadOS The menu bar displays the top-level menus for your app or game, including both system-provided menus and any custom ones you choose to add. People reveal the menu bar by moving the pointer to the top edge of the screen, or swiping down from it. When visible, the menu bar occupies the same vertical space as the Status bars at the top edge of the screen. As with the macOS menu bar, the iPadOS menu bar provides a familiar way for people to learn what an app does, find the commands they need, and discover keyboard shortcuts. While they are similar in most respects, there are a few key differences between the menu bars on each platform. | | | | | | | | | | | | | | Because the menu bar is often hidden when running an app full screen, ensure that people can access all of your app’s functions through its UI. In particular, always offer other ways to accomplish tasks assigned to dynamic menu items, since these are only available when a hardware keyboard is connected. Avoid using the menu bar as a catch-all location for functionality that doesn’t fit in elsewhere. Reserve the YourAppName > Settings menu item for opening your app’s page in iPadOS Settings. If your app includes its own internal preferences area, link to it with a separate menu item beneath Settings in the same group. Place any other custom app-wide configuration options in this section as well. For apps with tab-style navigation, consider adding each tab as a menu item in the View menu. Since each tab is a different view of the app, the View menu is a natural place to offer an additional way to navigate between tabs. If you do this, consider assigning key bindings to each tab to make navigation even more convenient. Consider grouping menu items into submenus to conserve vertical space. Menu item rows on iPad use more space than on Mac to make them easier to tap. Because of this, and the smaller screen sizes of some iPads, it can be helpful to group related items into submenus more frequently than in the menu bar on Mac. macOS The menu bar in macOS includes the Apple menu, which is always the first item on the leading side of the menu bar. The Apple menu includes system-defined menu items that are always available, and you can’t modify or remove it. Space permitting, the system can also display menu bar extras in the trailing end of the menu bar. For guidance, see Menu bar extras. When menu bar space is constrained, the system prioritizes the display of menus and essential menu bar extras. To ensure that menus remain readable, the system may decrease the space between the titles, truncating them if necessary. When people enter full-screen mode, the menu bar typically hides until they reveal it by moving the pointer to the top of the screen. For guidance, see Going full screen. Menu bar extras A menu bar extra exposes app-specific functionality using an icon that appears in the menu bar when your app is running, even when it’s not the frontmost app. Menu bar extras are on the opposite side of the menu bar from your app’s menus. For developer guidance, see MenuBarExtra. When necessary, the system hides menu bar extras to make room for app menus. Similarly, if there are too many menu bar extras, the system may hide some to avoid crowding app menus. Consider using a symbol to represent your menu bar extra. You can create an Icons or you can choose one of the SF Symbols, using it as-is or customizing it to suit your needs. Both interface icons and symbols use black and clear colors to define their shapes; the system can apply other colors to the black areas in each image so it looks good on both dark and light menu bars, and when your menu bar extra is selected. The menu bar’s height is 24 pt. Display a menu — not a popover — when people click your menu bar extra. Unless the app functionality you want to expose is too complex for a menu, avoid presenting it in a Popovers. Let people — not your app — decide whether to put your menu bar extra in the menu bar. Typically, people add a menu bar extra to the menu bar by changing a setting in an app’s settings window. To ensure discoverability, however, consider giving people the option of doing so during setup. Avoid relying on the presence of menu bar extras. The system hides and shows menu bar extras regularly, and you can’t be sure which other menu bar extras people have chosen to display or predict the location of your menu bar extra. Consider exposing app-specific functionality in other ways, too. For example, you can provide a Dock menu that appears when people Control-click your app’s Dock icon. People can hide or choose not to use your menu bar extra, but a Dock menu is aways available when your app is running. Resources Related Menus Dock menus Standard keyboard shortcuts Developer documentation CommandMenu — SwiftUI Adding menus and shortcuts to the menu bar and user interface — UIKit NSStatusBar — AppKit Videos Elevate the design of your iPad app Change log | |