Bottom navbar appears of the bottom of the screen which provides the ability to switch between different sections on the application. Bottom nav bars maintain the same height and orientation, and get hidden when keyboard is launched.

Bottom NavBar


Bottom navbar is strictly used for navigation on the homepage only and provide easy switching between app’s main features and the active tab is always highlighted by the active color of the app. They can hold maximum of five tabs and minimum of 3 always, If some more tabs are required but does not fit this guideline then the final visible tab becomes a More tab, which reveals the additional tabs as a list on an overlay or screen.

usage example image


example state image

With Notification

example state image

Without Notification

Edge Cases

example edge case image

Do not use more than 5 tabs in bottom bar