Nav tabs are UI elements that organize related content and allow users to navigate through different views of the same page. They appear as horizontal lines in the body of the page and serve for navigational purposes in a mobile app user interface.
Each destination in a nav bar is indicated by a relevant icon and an optional text label. When a user taps on a navigation item, the action is immediately triggered, and the page view changes, leaving the other views inactive.
Nav tabs can be separated into two categories:
Static nav tabs remain fixed on the screen. They maintain their position constantly – whether users are switching between tabs or sections or even scrolling.
Dynamic nav tabsnavtabs get hidden when users scroll or switch between navigational items.
Scrollable nav tabsnavtabs allow users to browse multiple tabs, and some tabs will be off-screen until the user reaches the item. They are best used for touch interfaces.
Primary nav tabs are used to organize the relevant information on a certain page. They represent the main content of the destination item and give users an idea of what to expect from this page.
Secondary nav tabs are placed under primary nav bars and are used to separate even further related content. They are used in content-heavy platforms or those with multiple pages so that they can establish a hierarchy.
Use nav tabs when a lot of content must fit into a small space. Nav Tabs allow easier navigation between this content by organizing it across different page views at the same hierarchy level. Instead of having too many cards or options on a single page, use nav tabs to distribute the content across manageable sections.
When a user selects another bottom nav tab item (different from the initial item), the app should immediately navigate to the destination page that the new item triggered. This is done through a transition pattern and leaves the other pages inactive.
If the user selects the same bottom nav tab item that it is currently on, the app might reset to the initial place of the screen (usually the top). But it could also leave the item fully inactive, and the action does not trigger anything on the page, leaving the screen as it is.
Nav Tabs should always include a relevant icon to the destination page. Use universally recognizable icons and symbols so that the destination and the actions within the destination are clear to every user. Pair these icons with a clear and short text label of what the destination represents and what the users might expect. This is good if the icon is not intuitive or obvious enough for users to understand.
Pro Tip: Icons can become optional if text labels are used, and vice-versa.
A nav tab has two states: active and inactive.
The respective item becomes active when a user taps on the navigation item. The active state represents that the user is currently on the destination page that the item triggered. To visually indicate the state of a nav tab item, the icon is either highlighted, change its color, or its outlines become filled.
The inactive state of a nav tab item indicates that users did not interact with the respective items. They are dimmed or greyed out to visually suggest that these options are currently not in use.
When using nav tabs, only related content should be grouped into defined categories – not sequential content. Do not use nav bars for content that must be read in a specific order. Instead, establish a content hierarchy and group them accordingly.
Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find nav tabs and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!
So, get your uinkits package and start designing now!
