Types of navigation
Navigation is the act of moving between screens of an app to complete tasks. It’s enabled through several means: dedicated navigation components, embedding navigation behavior into content, and platform affordances.
Navigational directions
Based on your app’s information architecture, a user can move in one of three navigational directions:
- Lateral navigation refers to moving between screens at the same level of hierarchy. An app’s primary navigation component should provide access to all destinations at the top level of its hierarchy.
- Forward navigation refers to moving between screens at consecutive levels of hierarchy, steps in a flow, or across an app. Forward navigation embeds navigation behavior into containers (such as cards, lists, or images), buttons, links, or by using search.
- Reverse navigation refers to moving backwards through screens either chronologically (within one app or across different apps) or hierarchically (within an app). Platform conventions determine the exact behavior of reverse navigation within an app.
Lateral navigation
Lateral navigation refers to movement between screens at the same level of hierarchy. It enables access to different app destinations and features, or pivoting between related items in a set.
Destinations and hierarchy
An app's primary navigation component should provide access to all destinations at the top level of its hierarchy. Apps with two or more top-level destinations can provide lateral navigation through a navigation drawer, bottom navigation bar, or tabs.
Component | Use for | # destinations | Devices |
---|---|---|---|
Navigation drawer | Top-level destinations | 5+ | Mobile, Tablet, Desktop |
Bottom navigation bar | Top-level destinations | 3-5 | Mobile |
Tabs | Any level of hierarchy | 2+ | Mobile, Tablet, Desktop |
Forward navigation
Methods of forward navigation
Forward navigation refers to one of three types of movement between screens to complete a task:
- Downward in an app's hierarchy to access deeper content, from a parent screen (higher level of hierarchy) to a child screen (lower level)
- Sequentially through a flow, or an ordered sequence of screens, such as a checkout process
- Directly from one screen to any other in the app, such as from a home screen to a screen deep in an app's hierarchy
Implementing forward navigation
While lateral navigation uses dedicated navigation components, forward navigation is often embedded into a screen’s content through a variety of components.
Forward navigation can be implemented using:
- Content containers such as cards, lists, or image lists
- Buttons that advance to another screen
- In-app search on one or more screens
- Links within content
Reverse navigation
Reverse navigation refers to backward movement between screens. It can move users chronologically through their recent screen history, or upwards through an app's hierarchy.
Reverse chronological navigation
Reverse chronological navigation refers to navigating in reverse order through a user's history of recently viewed screens. It can move users between screens within an app or across multiple apps. For example, the Back button on a web browser is a form of reverse chronological navigation.
This type of navigation is typically provided by the operating system or platform. Individual platforms define how it behaves and how users can access that functionality.
Upward navigation
Upward navigation allows users to navigate one level upwards within a single app's hierarchy, until the app's home or top-level screen is reached. For example, the Up arrow in a top app bar is a form of upwards reverse navigation.
Upward navigation should be implemented for all child screens in an app and follow platform guidance. Android and web apps should use the Material Up action, while iOS apps should use the back button within an iOS Navigation Bar.
Considerations
The design and functionality of your app should account for both kinds of reverse navigation in your app's target platforms. To optimize a user's experience when navigating in reverse:
- Return users to their prior screen position and state, such as their vertical scroll position, to speed up information recall and task resumption.
- Provide clear messaging if a screen's prior state is no longer available, such as when information from a form has been cleared for privacy.
- Clearly indicate child screens' relationship with screens above them in the hierarchy. For example, if a user moves directly to a child screen in your app, they should be able to identify the parent screen to which they can navigate upward.