In modern applications, this type of navigation is quite commonly used, if not always. Currently, this is the primary navigation method in mobile applications. Depending on the guideline, it is called differently — Tab bar in Human Interface guidelines (HIG) and Navigation bar in Material guidelines version 3 (M3).
Here are a few reasons
Easy access: Convenient for finger tapping, providing easy access to the main sections of the application.
Simplicity and clarity: Navigation elements are visible and based on icons. Icons can quickly convey basic information about the content of a section.
Consistency: If navigation remains accessible on all screens of the application (not always, as we will discuss below), it creates a predictable user experience. Users can always return to the main screens of the application.
At the same time, such navigation has its limitations
The recommended number of items for this type of navigation is from 3 to 5 elements. You must organize all your scenarios into these 3–5 conditional “folders”. Moreover, we are heavily restricted in the number of characters and font size. It can be pretty challenging to come up with concise and understandable section names.
Display options
Once you’ve decided that your app needs bottom navigation, you’ll need to decide how this navigation will work. Technically, there are three possible implementation options:
- Navigation is visible only on the main screens. For example, suppose you have 3 sections in the bottom navigation — Home, Catalog, and Profile. When the user goes deeper into the Catalog section, they no longer see the bottom navigation.
- Navigation is visible everywhere. Even if the user goes inside the app to a second or third-level nested page, they can still see the bottom navigation.
- Navigation is visible on the main sections by default and appears on internal pages when scrolling up. This logic is suggested in Material guidelines as one of the possibilities.
Regardless of the platform, you can implement any of these options in both iOS and Android applications using native technologies.
In the Revolut app, they have chosen the first option. Navigation is visible only on the main screens of sections and disappears further. To see the bottom navigation, you must go back to one of the main screens: home, transfer, or hub.
Companies such as YouTube, Booking, Airbnb, and many others have chosen this type of navigation for their apps. Messenger apps also often choose this type because they don’t need to distract the user from the chat if the user is already inside.
By the way, if we look at the implementation of the Android app, we’ll notice some differences — in the Android version, the bottom navigation doesn’t have such a beautiful blur effect. It is replaced by a simple white background. This is due to the technical difficulties of implementing such an effect on the Android platform (it takes a long time and is expensive), as well as the absence of such an option in the guidelines. So if you want to use such a blur in an iOS app, be prepared to have an alternative version for Android.
Pros and cons of the solution
An obvious advantage of this solution is that navigation does not take up space on internal pages. The user can return by using the “Back” button. One downside is that this approach may make it difficult for the user to return to the main page, especially if they go too deep into the scenario.
This type of behavior is chosen less frequently. One example is the Fitness app from Apple.
Below, you will see the user’s path, starting from the main Fitness+ page and going deep into the scenario for viewing meditation content. While in the Fitness+ page, we click on the meditation section and view detailed information. Throughout the entire path, navigation at the bottom of the screen accompanies us.
No matter how deep we go into the scenario, we still see navigation. In this case, the tab where we started to dive deeper and deeper into our scenario always remains active.
We only don’t see navigation when directly watching workout videos because it is implemented in a full-screen modal window. Full-screen modal windows and drawers always overlay navigation as they open on top of all the content. The keyboard behaves the same way.
Navigation “remembers” our choice. If we go into a workout in the Fitness+ section and then click on the Summary tab, then clicking on the Fitness+ tab again will take us back to the meditation page, not the main Fitness+ screen. To return to the main section screen, you can click on the Fitness+ tab again.
Pros and cons of the solution
Among the pros of such navigation, it’s worth noting that it’s challenging to get lost in it. The user always understands which section they are in and can quickly return to the main sections of the application. The downside is that the bottom navigation sometimes takes up about 7–10 percent of the screen, which is quite a lot considering the sizes of our mobile devices.
This type of navigation is also actively used. For example, the Medium app employs it. The user sees navigation on the main section screens in the app. If the user moves to an article, they see navigation, but the navigation disappears as soon as they start reading and scrolling down.
Pros and cons of the solution
This type of navigation can be very convenient when we have a feed with content. For instance, in the Medium app, a user can scroll down the page in search of content. They don’t need navigation during surfing. No obvious downsides to this option have been found. However, that doesn’t mean it’s ideal. There is a suitable mechanic for each specific application, and it’s not guaranteed that this will be the most convenient one in your particular case.
Sometimes, the decision is made to use navigation differently depending on the section we are in. Facebook uses the “visible everywhere” type of navigation, but with one exception — the main Home tab works differently. The navigation disappears when we start scrolling down to avoid interfering with the news feed.
Most often, standard color fill is used under navigation, but Spotify has implemented a transparent gradient. This approach works well if you only have a dark theme in the app. You can implement it by placing a gradient layer under the navigation layer.
Binance highlighted the main action with a special icon in the center. Clicking on the center icon opens a curtain with actions (buy, sell, convert, etc.). This type of behavior is not specified in the guidelines, but implementing it is not difficult, even within the framework of native navigation.
Tab bars use bar items to navigate between mutually exclusive panes of content in the same view.
- Make sure the tab bar is visible when people navigate to different areas in your app (the exception is a tab bar within a modal view).
- Use the minimum number of tabs required.
- Use a succinct term for each tab title.
Read more details here.
Navigation bars let people switch between UI views on smaller devices
- Top-level destinations that need to be accessible from anywhere in the app
- Three to five destinations
- Navigation bars can be temporarily covered by dialogs, bottom sheets, navigation drawers, the on-screen keyboard, or other elements needed to complete a flow.
- Upon scrolling, the navigation bar can appear or disappear.
Read more details here.
In newer iPhone models, there is a home indicator — an interactive element in the form of a line. The home indicator has its own height but does not have a background. It can share a background with the elements of the bottom navigation. The tab bar height adds up to the height of the home indicator, forming a quite significant bottom margin.
If you want to truly get rid of this large margin, the folks at Facebook have done just that. They created an additional setting to reduce the height of the bottom navigation area.
Despite the attractiveness of this solution, I recommend approaching it with caution. iPhones with a home indicator physically end approximately there. There is no physical button or finger space at the bottom. Moreover, implementing this option will require modifications and additional testing on phones with and without a home indicator.