A complete guide to navigation on iOS & Android

A complete guide to navigation on iOS & Android

Ludovic Delmas
Ludovic Delmas

Navigation is a fundamental part of UX.

Mastering it will allow you to create user-friendly and easy-to-understand designs. Easy navigation can boost business metrics, such as conversion rate. That's especially important because of the small screen size of phones.

Mobile navigation is full of UI elements like “bottom app bars,” “navigation bars,” “navigation drawers,” “sidebars,” and “tab bars.”

On top of that, iOS navigation isn't the same as Android.

If you’re feeling overwhelmed, fear not!

3 areas of mobile navigation

Navigation enables users to move through an app or device.

Three main areas of navigation exist on mobile devices:

  1. Bottom navigation
  2. Top navigation
  3. Side navigation

All three are essential to know because that's how users interact to navigate apps on their mobile phones.

Unfortunately, aspiring UX designers have a hard time with navigation guidelines.

Bottom navigation on iOS vs. Android

First, let’s focus on bottom navigation. 

Why not start from the top, you ask? Because bottom navigation most often directly impacts top navigation.

In the screen below, the top navigation changes based on the selected tab in the bottom navigation.

Gmail screenshots showing bottom navigation directly impacting the top navigation.

That’s why in this guide, we’ll first discuss bottom, then top, and finally, side navigation. 

Bottom navigation helps users navigate:

  1. Their devices (with system-level navigation) 
  2. Their apps (with system or app-level navigation)

Bottom navigation elements on iOS and Android.

Bottom navigation on iOS

Let’s start with the Home indicator

Before November 2017, iPhones used to have a physical button called the Home button. Pressing it enabled system-wide actions like returning home, seeing the app collection, invoking Siri, and more.

In 2017, the iPhone X replaced the physical button with a digital Home indicator. Mobile screens have evolved rapidly in the past few years.

iPhones used to have a physical button called the Home button. It's now a digital button called the Home indicator.

Physical or digital, they help users navigate the system (OS). That's why the Home indicator is a system-level bottom navigation.

The Home indicator on your device helps you go back home, open multitasking, and switch between apps. See the image below.

The Home indicator on your device helps you go back home, open multitasking, and switch between apps.

On the other hand, the Tab bar helps users move between different screens within an app.

For example, in the Gmail app, the Tab bar enables you to switch between the “All Inboxes,” “Chat,” Spaces,” and “Meet” tabs.

The Tab bar helps users move between different screens within an app.

Apple recommends limiting the number of tabs in a Tab bar to 5. This prevents the tabs from being too close together.

Also, the Gmail Tab bar above shows four icon-only tabs. Do you know what each icon represents? We don’t!

That’s no good, as icons alone can be confusing—adding supportive labels is important.

Finally, ensure that the selected tab stands out from unselected ones. It helps users understand which tab they have selected.

A best practice is to use filled icons for a selected tab and outlined icons for unselected ones.

Bottom navigation on Android

Android is a thrilling but difficult platform because of its many devices. Let's start with the system navigation bar.

On Android, system navigation bars can vary by device manufacturer. Older devices used to have hardware instead of software buttons, like in the image below:

Older devices used to have hardware instead of software buttons.

Also, depending on the Android version and device, the digital navigation bar can be different or customized by users.

Two kinds of digital navigation bars exist on Android:

  1. Button mode
  2.  Gesture mode (similar to the iOS Home indicator)

Button mode on an Android device.

On Android, button mode is common, but newer models have gesture mode. Gesture mode is a thin bar that takes up less space on the screen. 

Long-time Android users may prefer sticking to button mode because they are accustomed to it.

Gesture mode on Android is somewhat similar to the iOS Home indicator. 

Gesture mode on an Android device.

To see the difference between button and gesture mode in action, check out this video by HardReset.info. Understanding that allows you to create better Android user experiences.

Remember that on Android, the Back button or gesture considers both system and app-level actions. The logic is complex. To learn more, read the Task and back stack article by Android Developers.

That’s it for the system-level navigation bar.

But just like iOS’ Tab bar, Android has a second navigation bar: the app-level navigation bar.

Android has a second navigation bar: the app-level navigation bar.

Like on iOS, the app-level navigation bar allows users to navigate between different screens within an app. Like going from Home to Subscriptions in the YouTube app. You can think of it as a table of contents.

Google recommends having 3 to 5 tabs in the app-level navigation bar with an icon and label.

Before moving on, here’s one last important note: Don’t confuse the navigation bar with the bottom app bar!

While they’re both at the bottom of the screen, they are pretty different.

Google defines the difference this way:

Navigation bars provide access to destinations in an app, whereas bottom app bars can contain both destinations and actions.

Let’s unpack what that means. 

Navigation bar vs. bottom app bar on Android.

The image above, on the left side, shows the YouTube mobile app’s navigation bar with Home, Shorts, Subscriptions, and Library tabs. These are “destinations.” Tapping them sends you to another part of the app.

The bottom app bar on the right side of the image provides access to actions—Select, Edit, Voice command, Image, Add.

Now, onto the next navigation area, the top navigation!

Top navigation on iOS vs. Android

The next step is the top navigation.

This is where iOS vs. Android terms get confusing.

We just saw that Android uses the name “Navigation bar” for their bottom navigation. Well, iOS uses that same name for its top navigation. It’s apples and oranges—pun 100% intended. 

Top navigation elements on iOS and Android.

As a UX designer, you must understand these differences to communicate with iOS and Android developers.

When you mention “navigation bar” to an iOS developer, they think of top navigation. However, an Android developer associates it with bottom navigation.

The moral of the story: As a product designer, you must know your vocabulary.

Top navigation helps users:

  1. Navigate the hierarchy of content
  2. Access information and actions related to the screen they’re on

To better understand this, look at how iOS and Android create their top navigation:

Different types of navigation bars and top app bars.

iOS and Android look different, but they work the same way. They let users find information, move around, and take action.

Visually, iOS distinguishes between tappable elements (navigation and actions) and informational content (title) using color. Everything that’s tappable is a color.

On the other hand, Android favors a more monochromatic look, where tappable and informational elements have the same color.

But overall, both platforms’ top navigation offers similar functionality.

Let’s dive into each category: 

  • Navigation
  • Information
  • Actions

Navigational elements are on the left side of the top navigation:

Leading navigation elements on iOS and Android

They allow users to go back or to open a side menu.

Concerning the back navigation, there are differences between iOS and Android:

iOS uses an icon and a label. The label tells you where you'll go if you press the button. If it says “Settings,” it means that pressing it will send you back to the Settings page. Also, it often just says “Back.”

That’s why, on iOS, this component mixes navigation (back) and information (label) into one.

On the other hand, on Android, the navigation is an icon without the informational element. More on that later. 

Finally, iOS and Android use a side menu icon that opens a “sidebar” or “navigation drawer.” Some people also call it “hamburger menu,” “navigation menu,” or “navigation item.”

This brings us to the next category: Information. 

Again, there are differences in how iOS and Android treat informational elements in the top navigation.

Informational elements in iOS and Android top navigation.

iOS describes both the back and current screen information. The first tells you where you’ll land if you click the button, and the second tells you what page you’re currently on. 

For instance, if you're on the Wi-Fi page and press the back button, you'll go to the Settings page. 

On Android, the back arrow and the title are two distinct elements. The back arrow takes you back, but no label tells you where you'll go. The title shows your current location. 

Again, if you're on the Wi-Fi page, pressing the back arrow takes you to the Settings page without needing a reminder. 

Often, aspiring UX designers tend to forget to add informational content in their top navigation. But it’s critical to helping users know where they are in the app. The top navigation is for more than just navigation and actions; it’s also for information. 

Onto the last category: Actions.

Actions in iOS and Android's top navigation.

Remember, iOS uses color for actions (blue in this case), whereas Android doesn’t. 

Both platforms handle it similarly regarding functionality and placement (right of the top navigation).

These actions are contextual and based on the screen users currently are. For example, if you see a “+” icon on the Wi-Fi page, it means you can add a Wi-Fi network.

Also, there is a menu option or menu item to the right of the action bar (three-dot icon). It displays other actions that you don't have room to display in the top navigation.

Lastly, remember that there are more top navigation variants than the ones we just discussed. For example, we didn’t cover search bars or breadcrumbs in the top navigation.

But that’ll give you a good understanding of how top navigation elements help users navigate an interface. 

Now, onto the final navigation area, the side navigation!

Side navigation on iOS vs. Android

Finally, we have side navigation.

Just like before, iOS vs. Android vocabulary gets confusing because they both have different names for similar elements. iOS calls it the “Sidebar,” and Android the “Navigation drawer.”

Side navigation on iOS and Android.

Again, if you aspire to become a mobile UX designer, you’ll have to know the vocabulary for each platform.

Side navigation helps users:

  1. Navigate an app
  2. Gain access to functionality

Both iOS and Android’s side navigation are similar, where a side menu slides in and out.

Here’s what a side menu looks like:

Closed and opened side menu on the Gmail iOS app.

Typically, to open the side menu, you press a Hamburger menu icon (three-lined icon).

It’s an ideal component when you have many destinations to send users to, like in the Gmail example above. 13 destinations are on the screen above, and even more when scrolling down. 

Remember how a Tab bar/Navigation bar (bottom navigation) can only have 5 or fewer tabs? Side menus are great to use when you have more than 5 destinations to send users to. 

The side menu can partially open with a dark area called a “scrim” beside it, as shown in the right image. It creates a visual hierarchy between the foreground and background.

Tapping the scrim closes the side menu. To close it, you can also swipe left on the menu directly.

It can also happen that a side menu consumes 100% of the horizontal screen real estate. In this case, we recommend adding a close button because there is no scrim on the edge of the screen. 

In closing

Mobile is an exciting but challenging platform.

That's because, unlike web pages, mobile has unique approaches depending on the OS.

Learning mobile navigation best practices will help you become more confident in your UX/UI skills. When building your UX portfolio, showcasing your work and design projects, great navigation will set you apart.

In our UX/UI Expert program, we go a step further by diving into lateral, forward, and back navigation.

So, if you’re ready to become an un-ignorable UI/UX designer, consider joining us! You’ll get expert mentorship just a chat away, a tight community, and the structure to succeed at your own pace.

Last note: Explore Apple's Human Interface Guidelines and Google's Material Design.

Get UX tips in your inbox every Saturday
First name
Email address
😎 You're awesome! We'll send you an email with the next steps. 🎊
👻 It looks like there's a ghost in the machine. Please try again.