Refer to the Material 3 Navigation Rail 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 rail provides top-level navigation to three to seven core destinations in an app, along with an optional floating action button (FAB).
In Material 3 Expressive, the navigation rail has been redesigned to include a collapsed and expanded version, with the expanded version replacing the navigation drawer.
Navigation rail with five destinations
Usage
Do
Use a navigation rail to display and switch between three to seven main destinations on medium, expanded, large and extra-large screens.
Don't
- Don’t use a standard navigation rail on compact screens, use a navigation bar or a modal navigation rail instead.
- Don’t use a navigation rail if there are fewer than three destinations to display. Instead, use tabs.
- Don’t use the collapsed navigation rail if there are more than seven destinations; use the expanded navigation rail.
- Consider different window size classes when choosing a navigation component.
- Display each destination with an icon and label.
- Keep the label of destinations short and concise.
- Don’t truncate or shrink text.
- Avoid text wrapping over more than two lines.
- Place secondary destinations in the expanded navigation rail.
- Position the rail in the same place across all screens of an app.
- When adding a logo to the navigation rail header, don’t use it as a button or as the menu icon for toggling between collapsed and expanded navigation rails.
Anatomy
For more details about the anatomy of the navigation rail, refer to the M3 guidelines.
A. Logo (Optional)
The header of the navigation rail can accommodate a logo above the optional menu icon and FAB.
Logo placement in the navigation rail
States
Focus state showing the visual extension in the collapsed navigation rail (left) and the expanded navigation rail (right)
Variations
Navigation rails come in two variations: collapsed and expanded, allowing users to switch by tapping on the menu button.
A. Collapsed Navigation Rail
The collapsed navigation rail is placed along the leading edge of the window and should contain three to seven navigation items, remaining always visible.
B. Expanded Navigation Rail
The expanded navigation rail, accessible via a menu icon, can be configured as either standard or modal. The standard setup is next to body content, ideal for spacious layouts, while the modal configuration overlaps the content, suitable for limited spaces or products with numerous navigation items. It reveals destinations that are not visible in the collapsed state.
Collapsed navigation rail (left) and expanded navigation rail (right)
Adaptive Design
The navigation rail is optimized for medium, expanded, and larger screens. For compact screens, we recommend using the navigation bar.
In adaptive layouts, it is best to keep the navigation rail outside of panes, along the leading edge of the screen. When hidden, body content can fill the space, provided the menu icon is accessible.
Schematics illustrating the alignment of the collapsed and expanded navigation rail with panes
Best Practices
M3 standard components should follow Horizon’s tonal theme, typography, and iconography
Configuration for Navigation Rail Items
Vertically Oriented Navigation Items
A vertical layout displays the icon and label stacked on top of each other.
Apply the following settings for selected and unselected navigation items.
A. Selected Navigation Item
Icon: Fiori icon filled, color On Secondary
Container Label: Text Caption 2, color Secondary
Indicator: Color Secondary Container
B. Unselected 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 collapsed rail items
Horizontally Oriented Navigation Items
In a horizontal layout, the icon and label are positioned side by side.
Apply the following settings for selected and unselected navigation items.
A. Selected Navigation Item
Icon: Fiori icon filled, color On Secondary Container Label: Text Subtitle 3, color On Secondary Container
Indicator: Color Secondary Container
B. Unselected Navigation Item
Icon: Fiori icon outlined, color On Surface Variant Label: Text Subtitle 3, color On Surface Variant
Badge: Text Caption 2, text color On Negative, container color Negative
Properties of expanded rail items
Menu and Collapse Action
The menu icon opens the expanded navigation rail, while the “Collapse” icon closes the navigation rail.
Apply the following settings for the menu and “Collapse” icon.
A. Menu - Open Expanded Navigation Rail
Icon: Fiori icon, color On Surface Variant
B. Collapse - Close Expanded Navigation Rail
Icon: Fiori icon, color On Surface Variant
Menu (top) and “collapse” icon (bottom)
FAB
Display the floating action button (FAB) in the collapsed navigation rail. In the expanded navigation rail, use the extended FAB.
Apply the following settings for the FAB.
A. FAB
Icon: Fiori icon, On Primary Container color
Container: Primary Container color
B. Extended FAB
Icon: Fiori icon, On Primary Container color
Label: Text Button, On Primary Container color
Container: Primary Container color
FAB (top) and extended FAB (bottom)
Resources
Development: FioriNavigationRail
SAP Fiori for iOS: Sidebar
Material Design: Navigation Rail