Learn

Let’s take a look at some commonly used mobile navigation patterns. By reusing these patterns, users don’t have to re-learn how to navigate your app. Instead, they can apply some of the patterns they already know. Doing so will help your users start using your app the second they install it.

On the right side, you can see these patterns as a GIF to get an understanding of the pattern.

  • Tab Navigation - This pattern uses a tab bar to allow users to switch between screens. Usually, these screens contain different functionality, like a home screen and a profile screen. There are more variants of the tab navigator, like Google’s Material Design (top) Tabs. The tabs usually contain the primary functionality of an app, like a feed and profile screen.

  • Stack Navigation - The second example is a stacked pattern. Instead of using a menu or tab bar, the user has to go from screen to screen to navigate through all screens. When a user navigates from one screen to another, the screen is pushed on a stack. The order of the stack doesn’t matter; every transition is another screen in the stack. However when going back a page, the last screen is removed from the stack and the previous screen is displayed. These stacks usually contain screens that are functional-related to each other, like a list of tasks and a task detail screen.

  • Drawer Navigation - Instead of using a tab bar, it uses a pane that can be opened by either swiping or opening a menu button. In this pane, there is a menu where the users can switch between screens. Like the tab bar pattern, these screens often contain the primary functionality of your app.

Instructions

Tab navigation is demonstrated on the left. A new screen is shown every time a tab icon is clicked.

Stack navigation is in the middle. The user goes from Feed, to Catalog, to Search, to Profile, and back.

Drawer navigation is on the right. One button opens the drawer and a screen is selected from the drawer menu.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?