Bottom navigation provides quick navigation between top-level views of an app. It is primarily designed for use on mobile.
Larger displays, like desktop, may achieve a similar effect by using side navigation. For instance, the compact “rail” treatment displays navigational icons by default.
When to use
Bottom navigation should be used for:
- Three to five top-level destinations of similar importance (alternative: a persistent navigation drawer accessible from anywhere in the app)
- Destinations requiring direct access from anywhere in the app (alternative: tabs for only one or two destinations)
If your top-level navigation has more than six destinations, provide access to destinations not covered in bottom navigation through alternative locations, such as a navigation drawer.
Bottom navigation and tabs
Be cautious when combining bottom navigation with tabs, as the combination may cause confusion when navigating an app. For example, tapping across both tabs and bottom navigation could display a mixture of different transitions across the same content.