Guidelines for command bars
[Some information relates to pre-released product which may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.]
Command bars provide users with easy access to actions, and can be used to show commands or options that are specific to the user's context, such as a photo selection or drawing mode. They can also be used for navigation among app pages or between app sections. Command bars can be used with any navigation pattern.
Command bars consist of two components: the action space, for placing commands or nav items that you want to remain visible, and the "More" area, which is represented on the command bar as an ellipsis [•••]. The "More" area opens a drop-down list view menu for commands and nav items that are accessed less frequently. Selecting the [•••] button opens the menu and reveals text labels for each item in the action space. If no items exist within "More," then the drop-down isn't opened, though text labels are still revealed for items in the action space.
Command bars can be placed at the top of the screen, at the bottom of the screen, at both the top and bottom of the screen, and inline.
- For mobile devices, if you're placing just one command bar in your app, put it at the bottom of the screen for easy reachability. If your app has tabs on the bottom, consider placing the command bar at the top so that the UI isn't too bottom-heavy.
- For larger screens, if you're placing just one command bar, we recommend placing it at the top of the screen.
- You can also place command bars inline, so that people can use them for contextual actions.
Command bars can be placed in the following screen regions on single-view screens (left example) and on multi-view screens (right example). Inline command bars can be placed anywhere in the action space.
Prioritize the actions that go in the command bar based on their visibility.
- Place the most important commands, the ones that you want to remain visible in the bar, in the first few slots of the action space. On the smallest screens (320 epx width), between 2-4 items will fit in the command bar's action space, depending on other on-screen UI.
- Place less-important commands later in the bar's action space or within the first few slots of the "More" area. These commands will be visible when the bar has enough screen real estate, but will fall into the "More" area's drop-down menu when there isn't enough room.
- Place the least-important commands within the "More" area. These commands will always appear in the drop-down menu.
Items in the actions space can be visualized with either icons or buttons. When only using icons, include a text label. The text label appears under the icon when the [•••] is selected.
If there is a command that would appear consistently across pages, it's best to keep that command in a consistent location. We recommended placing Accept, Yes, and OK commands to the left of Reject, No, and Cancel. Consistency gives users the confidence to move around the system and helps them transfer their knowledge of app navigation from app to app.
Although you can place all actions within the "More" drop-down menu so that only the [•••] is visible on the command bar, keep in mind that hiding all actions could confuse users.
Consider logical groupings for the commands, such as placing Reply, Reply All, and Forward in a Respond menu.
Because text labels are hidden for command bar actions unless [•••] is selected, consider using tooltips for action icons.
- The "More" affordance [•••] is the visible entry point for the menu, and sits on the far-right of the toolbar adjacent to primary actions.
- Each action in the primary action space is represented by an icon. Selecting the overflow menu reveals text labels for each of the actions in the primary action space.
- The overflow menu space is allocated for actions that are less frequently used.
- Actions can come and go between the primary action space and the overflow menu at breakpoints. You can also designate actions to always remain in the primary action space regardless of screen or app window size.
- Infrequently used actions can remain in the overflow menu even when the app bar is expanded on larger screens.
- The same number of actions in the app bar should be visible in both portrait and landscape orientation, which reduces the user's cognitive load. The number of actions available should be determined by the device's width in portrait orientation.
- By targeting breakpoints, you can move actions in and out of the menu as the screen size or app window size changes.