Share via


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.

Navigation Rail with three variants aligned – top, center, and bottom

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.

Sample app spanned across two screens, using Navigation Rail on the left screen with five icon elements. Photos of plants are shown on the left screen and a single plant is selected on the right screen, with descriptive text also showing

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:

Example bottom navigation bar with five icon elements

A complete example with the bottom navigation is shown below:

Sample app on a single screen showing the bottom navigation bar being used instead of Navigation Rail

Existing Android phone apps with bottom navigation should consider adding Navigation Rail when adapting to larger screens and foldables.

When to use

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

Sample Android app

There are Navigation Rail sample apps available using Kotlin with XML layouts as well as Jetpack Compose:

Jetpack Compose example of Navigation Rail sample app

Design component

Refer to the Design Kit for visual guidance on Navigation Rail layouts:

Design Kit screenshot showing six different Navigation Rail alignments