information
Material Design 3 Standard Component
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, 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 floating action button and four 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 window size class when choosing a navigation component.
  • Represent 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

information
We recommended placing the profile in the app bar instead of the navigation rail.

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

Variations

Collapsed and Expanded Navigation Rail

The navigation rail can transition between a collapsed and an expanded version on any device. The expanded navigation rail replaces the navigation drawer.

The menu icon expands the collapsed navigation rail into the expanded navigation rail. The content (FAB and menu items) transforms to fill the width of the expanded rail.

The expanded navigation rail can display secondary destinations that aren’t visible on a collapsed navigation rail.

Expanding and collapsing the navigation rail

Non-Modal Expanded Navigation Rail and Modal Expanded Navigation Rail

The expanded navigation rail has a standard non-modal (A) and modal (B) configuration. The non-modal expanded navigation rail sits next to the body content, whereas the modal expanded navigation rail opens on top of it.

We recommend using the modal configuration for smaller screens or apps with limited space. The navigation rail can also be hidden completely when collapsed and reopened by tapping the menu icon.

Non-modal expanded navigation rail (left) and modal 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.

Resources

Development: FioriNavigationRail

SAP Fiori for iOS: Sidebar

Material Design: Navigation Rail