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
The navigation rail provides top-level navigation to three to seven core destinations in an app.
Navigation rail with floating action button, profile, and four destinations
Usage
Do
Use a navigation rail to display three to seven main destinations.
Don't
- Don’t use a navigation rail if there are fewer than three destinations to display. Instead, use tabs.
- Don’t use the navigation rail if there are more than seven destinations; use the navigation drawer instead.
- Use the navigation rail on tablet and desktop devices.
- Represent each destination with an icon and label or icon only.
- Keep the label of destinations short and concise.
- truncate or shrink text
- Avoid text wrapping, shrinking, and truncation.
Anatomy
A. Container
The container includes all destinations including icons, labels, active indicator, and optional elements, such as a floating action button (FAB) and profile.
B. Icon
Icons visualize the app destinations. Use filled icons for the selected destination and unfilled icons for unselected destinations.
C. Label Text (Optional)
The label text provides a short and concise description of the destination.
D. Active Indicator
The active indicator highlights the selected destination.
E. Small Badge (Optional)
The small badge can be used to display a change, for example, a new notification.
F. Large Badge with Value (Optional)
The large badge with value can be used to show a number for status changes.
G. Floating Action Button (Optional)
The floating action button (FAB) can be placed above the navigation destination for the app’s key action.
H. Profile/Avatar/Initials (Optional)
A profile/avatar/initials help users can identify the person the profile belongs to.
Images of people should always be in a circle. The profile can be top or bottom-aligned. If there is a FAB and profile in the navigation rail, you can only use the bottom-aligned profile.
Navigation rail anatomy
Behavior and Interaction
When the user taps on a destination or one is focused in the navigation rail, the user is directed to the navigation destination associated with that icon and label. Selected destinations are visually highlighted by the active indicator and the filled icon.
The navigation rail is placed on the edge of the screen. On the left side for left-to-right languages and on the right side for right-to-left languages.
Selecting another destination in the navigation rail
Scrolling
While scrolling vertically and horizontally, the navigation rail remains fixed. If the content scrolls horizontally, the navigation rail increases elevation and lets the content scroll behind it.
Behavior of navigation rail when scrolling vertically
Adaptive Design
A navigation rail uses 100% of the screen height. The destinations are aligned as a group on top of the rail. On compact screens, it is best to replace the navigation rail with a more appropriate component, such as a navigation bar or modal navigation drawer.
Combination of a navigation rail with a navigation drawer
Variations
A. Label and Icon
The default navigation rail consists of a label and an icon.
B. Icon Only
For a simplified navigation rail, the labels can be omitted. The icons should always be unambiguous for users.
C. 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 if the icons have a clear meaning to users.
Navigation rail with label and icon (left), icon only (middle), and label with icon only for selected destination (right)