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 four 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 rail instead.
- Use a navigation bar with vertical navigation items for compact window size classes.
- Use a navigation bar with horizontal navigation items for medium window size classes.
- Keep the title of destinations short and concise.
- Avoid wrapping, truncating, or shrinking text.
States
States visually indicate the status of a component or interactive element and follow the Material Design 3 standard. Keyboard focus extends the M3 standard by highlighting the focused element with an outline.
Navigation bar container with vertical configuration (top) and horizontal configuration (bottom)
Adaptive Design
On compact windows, the navigation bar uses 100% of the screen width and vertical navigation items are equally distributed across the navigation bar.
On medium windows, we recommend using a horizontal layout of the navigation items and aligning the destinations centered in the navigation bar with outer margins. When transitioning from a small screen to a large screen, a navigation bar transforms into a navigation rail, providing the same features that are better suited for larger displays.
Horizontal navigation items centered with margins on the edges
Best Practices
M3 standard components should follow Horizon’s tonal theme, typography, and iconography.
Navigation Bar Items
Vertically Oriented Navigation Items
In a vertical layout, the icon and label are stacked on top of each other.
Navigation Bar Container
Container: Color Surface Container
Navigation bar in a vertical layout
A. Selected Vertical Navigation Item
Icon: Fiori icon filled, color On Secondary Container
Label: Text Caption 2, color Secondary
Indicator: Color Secondary Container
B. Unselected Vertical Navigation Item
Icon: Fiori icon outlined, color On Surface Variant
Label: Text Caption 2, color On Surface Variant
Badge: Text Caption 2, text color On Negative, container color Negative
Properties of vertical navigation bar items
Horizontally Oriented Navigation Items
In a horizontal layout, the icon and label are positioned side by side.
Navigation Bar Container
Container: Color Surface Container
Navigation bar in a horizontal layout
A. Selected Horizontal Navigation Item
Icon: Fiori icon filled, color On Secondary Container
Label: Text Caption 2, color On Secondary Container
Indicator: Color Secondary Container
B. Unselected Horizontal Navigation Item
Icon: Fiori icon outlined, color On Surface Variant
Label: Text Caption 2, color On Surface Variant
Badge: Text Caption 2, text color On Negative, container color Negative
Properties of horizontal navigation bar items
Resources
Development: FioriNavigationBar, BottomNavigationView
SAP Fiori for iOS: Tab Bar
Material Design: Navigation Bar