Bottom navbars are UI elements that stand as the structural architecture for all mobile applications. They display the in-app navigation controls and are represented by a responsive row placed at the bottom of the screen.
Bottom navbars serve for navigational purposes in a mobile app user interface due to their convenient and natural placement. Each destination is indicated by a relevant icon along with an optional text label. When a user taps on a navigation item, the action is immediately triggered, and the page changes, leaving the other pages inactive.
Static navbars remain fixed at the bottom of the screen. They maintain their position constantly – whether users are switching between tabs or sections or even scrolling.
Dynamic Navbars
Dynamic navbars are also at the bottom of the screen, but they get hidden when users scroll or switch between navigational items.
When To Use Bottom Navbars?
Bottom navbars should be used in cases where:
Use when it’s needed to offer access to a range of three to five destinations.
Use for top-level destinations needed to be accessed from everywhere across the app.
Use in smaller screens – such as mobile or tablet screens.
Do not use it for single destinations.
Do not use it if the primary actions of the destinations will change across the platform.
Do not make scrollable bottom navbars.
Navbar Best Practices
Behavior
When a user selects another bottom navbar 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 navbar 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.
Anatomy
Bottom Navbar Container
Relevant Icon
Label Text (optional)
Indicator State – Active/Inactive
Large Notification Badge (optional)
Small Notification Badge (optional)
Icon
Bottom navbars 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.
States
A bottom navbar 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 bottom navbar item, the icon is either highlighted, changes its color, or its outlines become filled.
The inactive state of a bottom navbar 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.
Use the Navbar UI Element in Your UI/UX Design With uinkits
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 navbars 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!
