Jenny Stanley
Jenny Stanley 9 August 2021

Top 6 Basic Patterns for Mobile Navigation: Pros and Cons

There are many types of mobile navigation, and new ones are constantly created. In this article, we will discuss 6 of the most common types of mobile navigation found in an app and their advantages and disadvantages.

What is Navigation in App Design?

Imagine mobile apps are cities in the world and you (the user) are a tourist. Every city has its own culture, language, roads, and architecture that you might not understand. App navigation design is like a map or GPS that allows you to navigate those cities.

Good navigation design makes it effortless for you to move between the different screens of an app, it is intuitive and makes you feel in control the whole time, letting you know where you are going and where you are at all times.

Every app is different, so is every navigation. This article will discuss some of the most common types of navigations found in an app.

Types of Navigation

1. Menu

Designers have an additional problem when creating an app for a phone because of its limited screen dimensions. For this, they need to carefully think about how each pixel will be occupied.  A lot of apps contain multiple menus which allow you to access the different parts of an app. The more complex the app, the more menus it will have. Some of these menus are in the following.

1.1 Hamburger

You might have seen this menu many times on websites or apps without even knowing its name. It is usually found on the left top corner of the screen, and it usually appears as 3 lines stacked on top of each other.


  • Over the years it has gained a lot of popularity, making it recognisable almost everywhere
  • It occupies a very small space on the screen
  • Allows you to hide large menus or primary navigation while being always accessible


  • Even though it is widely understood as a menu, its shape might be confusing to some users
  • It takes one more step or action to discover that you must click on the icon first
  • It can be challenging to access on mobile screens due to its position on the top corner of the screen


1.2 Hierarchical - Dropdown

This type of menu is mostly common on websites, but it can also be used on mobile. It allows for multiple options to be found from a top tier menu on a single screen. This design requires a lot of planning and it is usually used to display sub-categories or sub-lists as a dropdown menu. You might find this kind of menu with a small icon of a downward triangle or arrow next to a menu label.


  • It can offer countless options in one single screen
  • It does not have to occupy the whole screen


  • Too many options or levels might make the interface seem very complex and frustrating


1.3 Hierarchical – Full Screen

Essentially, this menu is very similar to a dropdown with the main difference being that each subcategory is shown on a different screen and it allows for more than one level. This type of menu is usually implemented in settings or configuration options.


  • It is clearer than a dropdown and makes information easy to find if properly organised
  • Allows for multiple levels


  • It occupies the whole screen and does not allow other content than the menu itself
  • Too many options or levels might make the interface seem very complex and frustrating


2. Tab Bar

Tab bars are a great alternative to a hamburger menu for mobile design, especially when you have a limited amount of high priority navigation options. They usually appear as a static bar at the bottom or top of the screen with either an icon or label for each tab.


  • They are very intuitive and are a clear indicator of the user’s journey in the app. For instance, changing the colour when you are in the tab
  • A tab bar helps to bring consistency throughout the app
  • Immediate access compared to a hamburger menu
  • Friendly location when located at the bottom of the screen near your thumb


  • They occupy more space than other navigation types like hamburger menus
  • A limited number of tabs can be displayed on a phone


3. Tabs

Tabs play a similar role as a tab bar. However, there is the main difference that the content of tabs is in some sort of way related to each other or at least part of a common category


  • Help organising similar content
  • Universally understood
  • A convenient method of adding additional content


  • Hard to give the third level of navigation
  • A limited number of tabs can be displayed horizontally
  • Content is hidden within tabs which might be overlooked by the user


4. Gestures

The lack of space on the screen of a phone is compensated by the gestures that can be performed. As technology evolves, more gestures are introduced into mobile devices. Some examples of these gestures are swiping, double-tap, pinching, rotating and 3D touch amongst others.


  • Enhances interaction and replaces actions such as scrolling through a page which would not be possible without a mouse or keyboard
  • Reduces the use of buttons in some instances such as moving through different pages, images, lists and similar
  • They have become a standard making it easy for people to recognise instinctively
  • Once learnt, increases the ease of use of the app
  • Can be implemented creatively in numerous ways
  • Can be implemented to enhance the actions of other navigation buttons such as a back button by swiping right on the screen 


  • Most of them would require prior explanation to establish a relation between gesture and function
  • When overused might be difficult to implement
  • It might be difficult for some users to perform certain gestures


5. Back Button

This is an essential button in many apps, and it is usually located on the top-right part of a screen. The idea behind a back button is simply to take you back to the previous screen you were at. This is extremely useful, especially in large applications which contain several sub-categories.


6. Close button

Close buttons main purpose is to cancel actions. They are typically used to cancel searches, filters, pop-up windows and more. You can usually find this button in the right corner.


Important Things to Consider

For every type of navigation that is implemented in an app, there are several things that should be considered.

  • Navigation should be clear by making use of layout and pattern principles
  • The design should be made considering human-computer-interactions making it as intuitive as possible
  • Every element should be concise and straightforward using meaningful labels and having the right number of options
  • Make sure the navigation’s structure is clear and its flow is consistent


There are many types of mobile navigation, and new ones are constantly created. When deciding which navigation elements to use, a designer needs to weight the advantages and disadvantages of each element against the needs of the app whilst creating an ultimate user experience.

If you have any questions or need help with a project, feel free to reach out. We are a world-class web design agency that specialises in high-end web design and creating websites. We create designs of all shapes and sizes, from small sites to large e-commerce sites, but all with the same level of passion and skill. We connect brands to their audiences in today's world.

Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
Personalize Your Marketing Using 15 AI-Powered Prompts

Personalize Your Marketing Using 15 AI-Powered Prompts

Personalization has undoubtedly become one of the key elements that marketers shouldn’t ignore or underestimate any longer. With consumers increasingly expecting tailored experiences, the ability to customize...

Georges Fallah
Georges Fallah 30 May 2024
Read more
How to Review a Website — A Guide for Beginners

How to Review a Website — A Guide for Beginners

A company website is crucial for any business's digital marketing strategy. To keep up with the changing trends and customer buying behaviors, it's important to review and make necessary changes regularly...

Digital Doughnut Contributor
Digital Doughnut Contributor 25 March 2024
Read more
Craft the Winning Experience: A Deep Dive into Customer Experience (CX)

Craft the Winning Experience: A Deep Dive into Customer Experience (CX)

Understanding Customer Experience (CX) is crucial for business success. This blog explores CX, trending questions, and the Future of CX. Learn how to craft exceptional experiences that keep customers coming back for...

Sukhdev Singh
Sukhdev Singh 5 June 2024
Read more
7 Reasons Why Social Media Marketing is Important For Your Business

7 Reasons Why Social Media Marketing is Important For Your Business

In the past two decades social media has become a crucial tool for marketers, enabling businesses to connect with potential customers. If your business has yet to embrace social media and you want to know why it is...

Sharron Nelson
Sharron Nelson 29 February 2024
Read more
The Impact of New Technology on Marketing

The Impact of New Technology on Marketing

Technology has impacted every part of our lives. From household chores to business disciplines and etiquette, there's a gadget or app for it. Marketing has changed dramatically over the years, but what is the...

Alex Lysak
Alex Lysak 3 April 2024
Read more