Refer to the Material 3 Navigation Bar guideline article provided by the Android operating system. Our design guideline serves as an extension, offering further details about specific topics.
[internal_only] In the Adaptive Layout Toolkit, you can find templates and examples of use cases for the M3 standard component. You can duplicate these using the Horizon theme with a Tonal option to create your own designs. [/internal_only]
Intro
A navigation bar provides fast access to two to five core destinations in an app.
Navigation bar with three destinations
Usage
Do
Use the navigation bar for two to five core destinations.
Don't
Don’t use the navigation bar if there is only one destination or if there are more than five, use the navigation drawer instead.
- Use the navigation bar for compact and medium window sizes.
- Keep the title of destinations short and concise.
- Avoid wrapping, truncating, or shrinking text.
Anatomy
A. Icon
Meaningful icons visualize the app destinations. Use filled icons for the selected destination and unfilled icons for unselected destinations.
B. Active Indicator
The active indicator highlights the selected destination.
C. Label Text
The label text provides a short and concise description of the destination.
D. Large Badge with Value (Optional)
The large badge with value shows a number for status changes.
E. Small Badge (Optional)
The small badge displays a change, for example, a new notification.
F. Container
The container contains all destinations including icons, active indicator, and optional labels.
Navigation bar anatomy
Behavior and Interaction
Selecting another destination in the navigation bar
Scrolling up and down while the navigation bar remains fixed
Adaptive Design
Use navigation bars on mobile and small tablet interfaces. The navigation bar uses 100% of the screen width and the destinations are equally distributed across the navigation bar.On tablets, replace the navigation bars with a more appropriate component, such as a navigation rail or navigation drawer.
Variations
There are different variations of destinations to represent the navigation bar:
- Label and icon
- Icon only
- Label and icon for selected destinations and icon only for unselected destinations
Label and Icon
The default navigation bar consists of a label and an icon.
Navigation bar destinations with label and icon
Icon Only
For a simplified navigation bar, you can omit the labels. Icons should always be unique and universally represented for users (e.g., basket, home and favorites).
Navigation bar destinations with icon only
Mixed
The mixed variation is used to emphasize the selected destination with label and icon and the unselected destinations are displayed with icon only. Use this variation only when the icons have a clear meaning to users.
Navigation bar selected destination with label and icon and unselected destinations with icon only
Resources
Development: FioriNavigationBar, BottomNavigationView
SAP Fiori for iOS: Tab Bar
Material Design: Navigation bar