Top Navigation Bar
Jovin LiewWhat is a top navigation bar component?
Top Navigation Bar is the header component at the top of the screen that provides navigation and actions.
-
It allows the user to take action (e.g., search bar, bookmark button) or navigate (e.g., cart button, back button).
-
They are also commonly known as horizontal navigation bars, and are used primarily in mobile apps.
Navigation bars are commonly used in Title or branding, Action buttons, Back and home navigation.
Examples of top navigation bar| When to use Top Navigation Bar? | ||
|---|---|---|
| Brand identity or titles | Great for displaying app names, section titles, or a logo. | |
| Simple actions | Works well for essential actions like Back, Search, or Settings. | |
| Compact content | Suitable when the main content doesn’t require a lot of vertical space. | |
| When not to use Top Navigation Bar? | ||
|---|---|---|
| Primary navigation | Avoid if users need to switch between sections often; use a tab bar instead. | |
| Infrequent actions | Avoid cluttering this area with actions that are very rarely used - it may introduce unnecessary cognitive overload. | |
| Limited space | Avoid if it limits space for core content; opt for floating or collapsible alternatives. | |
What is the anatomy of horizontal navigation bars?
Anatomy of horizontal navigation barWhat are the design variants of a top navigation bar?
We studied over 3,000+ top navigation bar UI components on Mobbin, from real-world examples and found the following variants.
1. Larger headers in navbar
It is common to pair navigation bar with headers as it allows users to quickly learn which screen they are on.
Examples of navbar with large headers2. App logo in navbar for branding purposes
Many apps also choose to add their logos in the top navigation bar as a form of design branding so that users always know which app they are using.
Examples of navbar with app logo3. Action buttons in navbar
In order to prevent cluttering the tab bar design, designers can opt to put less important screens in the top navigation bar instead.
Note that the top of the screen is harder to access with one hand on mobile devices, and it is only advisable to add action buttons here if they are not primary or crucial. If not, consider using a floating action button instead.
Examples of right-aligned action buttons.
Examples of right-aligned action buttons.If you have a hamburger menu in your top navigation bar, consider putting your action buttons on each side instead.
Examples of one action button on each side of navbar.4. Navbar with back buttons
It is common to include a back button in the top navigation bar if users navigate from a main screen to a detail screen. For example, clicking on a profile page in Instagram.
A back button on the navbar signals to the users that they can revert back to the main screen by swiping right, or clicking on the back button.
Examples of navbar with back buttons5. Navbar with search bars
For shopping or content apps, it is common to include a search bar in the top navigation bar.
Examples of navbar with search inputs6. Floating top navigation bar
Finally, for apps that are more visually oriented, they may opt to fully utilize as much screen space as possible.
Having a floating top navigation bar helps to maximize this effect since the navigation bar takes up less space. Examples of apps using this variant include Snapchat, TikTok and MacDonalds.
Examples of navbar icons above background imageWhen to use navigation bars?
1. Title or branding
The navigation bar often includes the app's name or logo to provide branding and ensure users always know which app they are using.
Examples of title or branding in top navigation bar2. Action buttons
Some apps place important action buttons, such as "Add," "Search," or "Settings," in the navigation bar for easy access regardless of the current screen.
Example of action buttons in navbar3. Back and home navigation
The navigation bar often includes a back button that allows users to return to the previous screen or go back step by step within the app's navigation hierarchy.
It may also include a home button to quickly return to the app's main screen.
Example of back and home navigation