Choose a navigation structure based on the most important features in your application and the type of content that the application provides. You want to give users quick access to the most frequent tasks and avoid overwhelming them with content or tasks that are less important. Determine which of the following approaches to navigation works the best for your application.
| Approach | Use | Example |
|---|---|---|
| Tab | Allows you to structure content so that users can move easily between distinct sections of content of relatively equal importance. | A music application might include tabs for artists, albums, songs, and playlists. |
| Drill-down |
Allows you to structure content in a hierarchy. Taking this approach means that selected parts of the content appear at each level. Include a Back button in an action bar at the bottom of the screen so that users can navigate the hierarchy. |
In a list of messages, users could tap a message to see its contents. |
| Tab and drill-down |
Allows you to combine the two approaches. Use tabs only at the first level of an application, and then let users drill down into the content. |
A music application can have tabs for different genres. Users can tap a playlist to see a list of songs. |
| Custom |
Make sure that a custom approach provides a better experience than the approaches listed above. You should test the model thoroughly and refine it so that it is easy for users to learn. |
In a map, all available information (such as points of interest and directions) appears directly on the map. |
|
Tabs allow users to move between distinct sections of content. For example, a clock might include tabs for a world clock, alarm, timer, and stopwatch. Tabs are always fixed along the bottom of the screen in an action bar. |
 |
|
A tab menu (sidebar) is a vertically stacked, scrollable list of tabs. You can use a tab menu to hold less frequently accessed tabs, or you can use it instead of including tabs along the bottom of the screen. When users tap the button for the tab menu at the bottom of the screen, the tab menu slides in from the left and appears to the left of the main view. |
 |
|
An action bar is an area along the bottom of the screen that provides you with a compact way to include actions and tabs that are applicable to the screen. The location of the action bar allows users to access actions and tabs easily and effectively. |
 |
A title bar is an area along the top of the screen that can contain a title, a segmented control, or actions.
|
A title can help users understand the context of the current screen. If there's only one way to view the content and the context is not apparent, include a title in the title bar. If the content conveys the context in a richer way, you can omit a title. For example, a contact card can more richly identify the context with a picture and a name than a title can. Similarly, if tabs appear at the bottom of the screen, you should not include a title on the screen. |
 |
|
A segmented control is a group of horizontally stacked buttons that allows users to display different aspects of the same content type (for example, top applications, top free applications, and recently released applications). If there are two to four ways for users to view the content and users might frequently switch views, include a segmented control in a title bar. |
 |
|
You can include actions in a title bar. This approach is primarily used in sheets to help users complete and dismiss the sheet easily. It also helps prevent users from submitting information accidentally by separating the action buttons from a virtual keyboard. Place positive actions, such as Send, Accept, and Save at the top right of the screen. Place more destructive actions, such as Cancel, Close, and Back, at the top left of the screen. If you use drill-down navigation, include back navigation in the action bar unless the screen is highly focused on text input or back navigation is a primary action. In these cases, put the back navigation in the title bar so that the action is not covered by a virtual keyboard. For more information, see Sheets. |
 |
 |
 |
| Type | Use | Example |
|---|---|---|
| Action menu | Contains specific actions that are less frequently used than actions that appear directly in the action bar. |  |
| Context menu | Provides users with a quick way to access the most common actions for an item. Users don't have to open an item to act on it. For example, if users press and hold on a picture, actions such as Share, Edit, Move to folder, and Delete could appear in the context menu. |  |
| Application menu | Holds important actions that are independent of context and common across the application (for example, "Settings", "Log Out", and "About"). |  |
For more information, see Menus.
