Navigation rail

Navigation rails provide ergonomic movement between primary destinations in apps.

Android check Web Not available Flutter iOS Not available
Navigation rail for images app with four images
A navigation rail with four destinations and a Floating Action Button.

Usage

The rail is a side navigation component that displays three to seven app destinations and, optionally, a Floating Action Button. Each destination is represented by an icon and a text label.

The rail can function on its own at larger screen sizes, such as desktop and tablet. When users transition between screen sizes and devices, the rail can also complement other navigation components, such as bottom navigation.

Principles

Ergonomic

The navigation rail is a compact arrangement that puts high-priority destinations within reach on large screens.

Consistent

The rail should appear consistently on the same side of each screen in an app.

Adaptive

The rail complements adaptive and responsive navigation patterns.


When to use

Use the navigation rail on medium and large displays for primary destinations.

Navigation rails should be used for:

  • Top-level destinations that need to be accessible anywhere in an app
  • Three to seven main destinations in a product
  • Tablet or desktop layouts

Navigation rails shouldn’t be used for:

  • Small screen sizes
  • Single tasks, such as viewing a single email
  • Secondary navigation destinations

Anatomy

Anatomy of rail component with FAB, recent and music icons without text labels and images icon with text label
1. Container
2. Floating Action Button (optional)
3. A destination
4. Text label
5. Divider (optional)

Container

The navigation rail container is 72 dp wide by default.

The navigation rail is placed on the left side of the screen for left-to-right languages, and on the right side of the screen for right-to-left languages.

Density

The navigation rail container is 72 dp wide by default. To adjust for dense layouts, the container width can be reduced to 56 dp and text labels are omitted.

Navigation rail in images app with images icon with text label
The navigation rail container is 72 dp wide by default.
Navigation rail in images app with icons without text labels
In denser layouts, the rail can be reduced to 56 dp and text labels are omitted.

Orientation

The navigation rail should always run vertically along the side of a layout. For horizontal navigation components or smaller screens, consider using bottom navigation. For closely related sibling views under one parent, tabs and in combination with the navigation rail can form a cohesive navigation structure.

Horizontal navigation rail on top of an images app
Don'tDon’t position the navigation rail container horizontally.

Rail destinations

When a rail destination is selected, the user is taken to the top-level navigation destination associated with that icon.

Users are taken to the top-level destination associated with an icon when selected.

Icons

Navigation rail destinations are always represented by icons that can symbolize the content or the nature of a destination.

Images app with navigation rail with icons without text labels
Destinations are always represented by icons in the navigation rail.

Text labels

Text labels provide short, meaningful descriptions of navigation destinations and provide an alternative way for users to understand an icon’s meaning. Labels can either be persistent or can appear on active destinations only.

Images app with navigation rail without icons and text labels
DoWrite succinct labels that describe a destination.

Labels should be short enough to not be truncated. Additionally, the type scale should not be reduced to fit longer text labels.

Photos app with navigation rail with a truncated text label for the Photography icon
Don'tDo not truncate or display an ellipsis in place of label text.
Photos app with navigation rail with a text label for the Photography icon with reduced size text
Don'tDo not reduce the type size to fit more characters into a destination label.

Avoid wrapping long labels when possible. If necessary, create a line break between words, or hyphenate longer words.

Rail with “all pictures” text label in with a line break
CautionBreak up longer phrases into two text lines if necessary.

Icon and label colors

Active icons, inactive icons, and text labels should have sufficient contrast with the container. An active destination icon and label should use your app’s primary or high-emphasis “On” color. Inactive icons and labels use the medium emphasis “On” color.

Rail in Images app with “on color” for images icon and text label
DoUse the primary or high-emphasis “On” color for the active destination.
Rail in Images app with multiple icons in different colors
Don'tDo not use more than two colors for destinations or low-contrast colors in the navigation rail. This will make distinguishing active items more difficult.

Group alignment

Navigation rail destinations can be aligned as a group to the top, bottom, or center of a layout. On tablets, bottom alignment can make destinations easier for a user to reach with their thumbs.

Images app with three different rail locations
Left to right: Top, center, and bottom-aligned rail destination placement.

Floating Action Button

Optional: The rail provides a convenient container for anchoring the Floating Action Button (FAB) to the top of a screen, placing the app’s key action above navigation destinations.

Rail app with FAB icon above other icons without text labels
DoA top-aligned FAB in the navigation rail.
Rail app with FAB icon below other icons, images icon with text label selected
Don'tDo not place the FAB below rail destinations.

The top of the rail can also be used for a logo.

Images app with a logo at the top of the rail
CautionUse caution when placing logos in the rail where they might be confused with an action or destination.

Divider

Optional: A divider can help separate the rail from app content. The divider should be positioned on the edge of the rail container that’s adjacent to the app’s content area.

Images app with a divider separating the rail from four photos
A divider can make the navigation rail container distinct from other on-screen content.


Behavior

Scrolling

Destinations in the navigation rail should remain visible when scrolling vertically. If a layout scrolls horizontally, the rail can scroll off-screen or remain fixed. To...

Destinations in the navigation rail should remain visible when scrolling vertically.

DoRail destinations remain fixed while on-screen content scrolls vertically.

If a layout scrolls horizontally, the rail can scroll off-screen or remain fixed. To distinguish that content is scrolling underneath the rail, use a divider or add elevation to the rail.

A divider creates visual distinction between the rail and horizontally scrolling content.
Elevating the rail to 1 dp creates visual distinction between the rail and horizontally scrolling content.
CautionUse caution when horizontal scrolling will move the rail offscreen and limit access to rail destinations.

Text labels

Persistent text labels are visible at all times, regardless of a destination’s state. Selected text labels appear only when a destination is activated. If all...

Persistent

Persistent text labels are visible at all times, regardless of a destination’s state.

Images app with rail showing four icons with text labels, images icon with label selected
Persistent text labels are always visible.

Selected text labels

Selected text labels appear only when a destination is activated.

Images app with rail showing three icons without text labels, images icon with label selected

Unlabeled icons

If all icons in the navigation rail can be expected to have clear meaning to users, labels can be omitted as a group.

Images app with rail showing four icons without text labels
CautionEnsure that icons are clear to users if labels are omitted.

Badges

Rail icons can include badges on the upper right corner of the icon. Badges convey dynamic information about the associated destination, such as counts or...

Rail icons can include badges on the upper right corner of the icon. Badges convey dynamic information about the associated destination, such as counts or status.

Images app with rail showing three out of four icons with badges, images icon with text label selected
1. Badge on a rail destination
2. Badge with a number
3. Badge with a maximum character count

Interaction with other navigation components

When moving from a small screen to a larger display, bottom navigation can transform into rail navigation, providing the same quick access in a configuration...

Bottom navigation

When moving from a small screen to a larger display, bottom navigation can transform into rail navigation, providing the same quick access in a configuration that’s ergonomic and prominent on larger displays. However, the navigation rail and bottom navigation should not be used simultaneously.

Same app on small screen with bottom navigation and large screen with rail navigation
Left: Owl uses bottom navigation on smaller devices. Right: On larger displays the bottom navigation becomes a rail.
App with both rail and bottom navigation
Don'tDo not use a navigation rail and bottom navigation on the same screen.

Navigation drawer

The rail provides access to three to seven top-level destinations. A modal navigation drawer can work as a complementary component by supporting your navigation structure with secondary destinations or additional actions. A navigation drawer is unnecessary if there are no secondary destinations or actions in an app.

DoPair the rail with a modal navigation drawer when there are secondary destinations or actions that don’t belong in the rail.
App with both rail and bottom navigation
Don'tDo not use a navigation rail and bottom navigation on the same screen.
Rail with a permanent navigation drawer.
Don'tDo not pair the rail with a permanent or persistent navigation drawer.

Some apps, such as Material’s Reply, customize and extend the rail to function as both a rail and a navigation drawer.

Reply uses a custom version of the navigation rail which expands into a dismissable navigation drawer and contains additional actions.

Tabs

Tabs can be added when a top-level destination contains multiple related pieces of content. Create a clear distinction between the tab and rail destinations when both are in use.

Rail and modal navigation drawer with the same destinations
CautionAvoid repeating in the navigation drawer destinations that are already in the rail.

Backdrop

When a backdrop is in use, position the navigation rail on the back layer. When additional contextual information (such as titles) or actions (such as filtering) are present on the backdrop, ensure that they remain distinct from the rail.

CautionRail and tab destinations should be distinguishable when both are in use.
Images app with rail and backdrop
The navigation rail can rest on the back layer when a backdrop is in use.

Responsive patterns

When moving between screen sizes, the rail can enhance responsive design patterns. For example, an app that uses bottom navigation and a navigation drawer on...

When moving between screen sizes, the rail can enhance responsive design patterns. For example, an app that uses bottom navigation and a navigation drawer on mobile screens might adapt to a navigation rail and modal navigation drawer on tablet screens. On desktop screens, the app might use a permanent navigation drawer with additional destinations and actions.

The navigation rail is part of a cohesive navigation system that adapts across screen sizes.

Placement

Elevation

The navigation rail sits below the app bar (if an app bar is used) and rests on the background layer. The rail usually adopts an app’s background color.

Rally app with rail
Rally’s navigation rail rests against the background and shares the same color.

When an app bar or other elevated overlapping components are not in use, the navigation rail can be elevated for more differentiation from surrounding content.

Images app with elevated rail
The rail can be elevated when overlapping elevated components are not in use.

States

Destinations in the navigation rail can be active, inactive, focused, or pressed.

States are communicated through opacity and text to show when a destination is active or inactive. States are used to show pressed, focused, hover, and unselected states.

Inactive destination states have a reduced opacity while active states are fully opaque and use the app’s primary color by default.

When the navigation rail container uses an app’s primary color or belongs to a dark theme, the rail uses the app’s “On” Background color to convey states.

Graphic showing state appearances
1. Active
2. Inactive
3. Hover
4. Focused
5. Pressed

Theming

Rally Material Theme

The navigation rail in this personal finance app was customized using Material Theming. Areas of customization include typography and color. Other adjustments include widening the...

The navigation rail in this personal finance app was customized using Material Theming. Areas of customization include typography and color. Other adjustments include widening the rail width, vertically centering the destination group, and placing a logo at the top of the rail. On mobile screens, Rally’s navigation rail is replaced by simplified tab navigation.

Screenshot of Rally’s navigation rail
Rally is a personal finance app that uses the navigation rail on large displays

Color

Rally’s navigation rail uses custom colors for three elements: the container, activated items, and inactive items.

Rally’s navigation rail with container and icon colors labeled as follows
Element Category Attribute Value
1. Container Background Color
Opacity
#33333D
100%
2. Active icon, active text On Background Color
Opacity
#FFFFFF
100%
3. Inactive icons On Background Color
Opacity
#FFFFFF
40%

Typography

Rally’s navigation rail uses custom typography for destination text labels.

Rally’s navigation rail with typography labeled as below
Element Category Attribute Value
Text label Button Typeface
Font
Size
Case
Roboto Condensed
Bold
14
All caps

Specs

Tablet and desktop

Default

Destination height and width: 72 dp
Destination icon height and width: 24 dp
Destination group: 8 dp from the top edge of container

Rail with a FAB

FAB container: 72 dp; 8 dp padding above and below
Destination height and width: 72 dp

Rail with selected text labels

Inactive destination icons: centered within 72 dp container
Active destination icon: 14 dp from top edge of destination container
Text label baseline: 16 dp from bottom edge of destination container

Compact rail without text labels

Destination height and width: 56 dp
Destination group: 8 dp from top edge of container
Destination icon height and width: 24 dp

Using navigation rail

Before you can use the Material Navigation Rail, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

A typical layout will look similar to this:

Note: The width of a NavigationRailView will be 72dp wide by default. This can be changed to 52dp wide by setting the component style to Widget.MaterialComponents.NavigationRailView.Compact or Widget.MaterialComponents.NavigationRailView.Colored.Compact in the layout. The width of the rail can also be changed by setting the android:layout_width attribute to a specific DP value.

In navigation_rail_menu.xml inside a menu resource directory:

Note:NavigationRailView displays three to no more than seven app destinations and, optionally, a header view. Each destination is represented by an icon and a text label.

In code:

There's also a method for detecting when navigation items have been reselected:

That results in:

The navigation rail container is 72 dp wide by default.

Making navigation rail accessible

You should set an android:title for each of your menu items so that screen readers like TalkBack can properly announce what each navigation item represents:

The labelVisibilityMode attribute can be used to adjust the behavior of the text labels for each navigation item. There are four visibility modes:

  • LABEL_VISIBILITY_AUTO (default): The label behaves as “labeled” when there are 3 items or less, or “selected” when there are 4 items or more
  • LABEL_VISIBILITY_SELECTED: The label is only shown on the selected navigation item
  • LABEL_VISIBILITY_LABELED: The label is shown on all navigation items
  • LABEL_VISIBILITY_UNLABELED: The label is hidden for all navigation items

Adding a header view (eg. Floating action button)

The rail provides a convenient container for anchoring a header view (such as a FloatingActionButton, logo, etc.) to the top of the rail, using the app:headerLayout attribute.

Navigation rail with badges

The header view can also be added or removed at runtime using the following methods:

MethodDescription
void addHeaderView(@NonNull View view)The specified header view will be attached to the NavigationRailView, so that it will appear at the top. If the view already has a header view attached to it, it will be removed first.
void removeHeaderView()Detaches the current header view if any, from the Navigation Rail.

The following methods can be used to manipulate the header view at runtime.

MethodDescription
@Nullable view getHeaderView()Returns an instance of the header view associated with the Navigation Rail, null if none was currently attached.

Adding badges

Rail icons can include badges on the upper right corner of the icon. Badges convey dynamic information about the associated destination, such as counts or status.

Navigation rail with badges

Initialize and show a BadgeDrawable associated with menuItemId, subsequent calls to this method will reuse the existing BadgeDrawable:

As best practice if you need to temporarily hide the badge (e.g. until the next notification is received), change the visibility of BadgeDrawable:

To remove any BadgeDrawables that are no longer needed:

See the BadgeDrawable documentation for more information about it.

Theming a navigation rail

Navigation rail supports Material Theming and can be customized in terms of color and typography.

API and source code:

The following example shows a navigation rail with Material Theming.

Navigation rail theming example

Implementing navigation rail theming

Using theme attributes and a style in res/values/styles.xml (themes all bottom navigation rails and affects other components):

Or using a default style theme attribute, styles, and a theme overlay (themes all navigation rails but does not affect other components):

Or using the style in the layout (affects only this specific navigation rail bar):

No Android implementation guidance available
No Web implementation guidance available

Using navigation rail

Before you can a navigation rail, you need to import the Material Components package for Flutter:

You need to be using a MaterialApp.

For more information on getting started with the Material for Flutter, go to the Flutter Material library page.

Making navigation rail accessible

Flutter's navigation rail API supports labeling for accessibility via NavigationRailDestination.label. This label is often a Text, which automatically includes semantics. In the rare case where the label is not a Text, it can be wrapped in Semantics with a custom label string.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Theming a navigation rail

Navigation rail supports Material Theming and can be customized in terms of background color, elevation, text style, and icon themes using NavigationRailTheme.

See the NavigationRailThemeData class definition for details.

No Flutter implementation guidance available
No iOS implementation guidance available

Up next