Navigation Rail
Large screen Android devices have more room for navigational elements than the phone form-factor. The Material Design team recently added the Navigation Rail component for use on larger screens and foldable devices.
This component provides an ergonomic way to navigate on larger screens and supports three different alignments – top, center, and bottom. The Navigation Rail should have no more than eight choices.
A sample application that uses the Navigation Rail component is shown below running on a Surface Duo. In dual-portrait orientation the Navigation Rail sticks to the left side of the screen, offering easy access to navigational elements when the screen is in its open posture state. This behavior is also applied to large screen devices such as tablets.
Since foldables generally also offer the ability to present a smaller screen area (when completely folded or closed, depending on the device) the app should switch to a navigation option that's appropriate for the screen size, such as bottom navigation:
A complete example with the bottom navigation is shown below:
Existing Android phone apps with bottom navigation should consider adding Navigation Rail when adapting to larger screens and foldables.
Use Navigation Rail on foldables and large screen displays for primary navigation options, following these guidelines:
- Top-level destinations that need to be accessible anywhere in an app
- Three to eight main destinations in an app
Navigation Rail shouldn't be used for:
- Smaller screen sizes (consider using Bottom Navigation instead)
- Single task activities, such as viewing a list or thread
- Secondary navigation
There are Navigation Rail sample apps available using Kotlin with XML layouts as well as Jetpack Compose:
Refer to the Design Kit for visual guidance on Navigation Rail layouts: