Navigation rails provide ergonomic movement between primary destinations in apps.
Android check Web Not available Flutter iOS Not available
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
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.
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.
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.
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.
Labels should be short enough to not be truncated. Additionally, the type scale should not be reduced to fit longer text labels.
Avoid wrapping long labels when possible. If necessary, create a line break between words, or hyphenate longer words.
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.
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.
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.
The top of the rail can also be used for a logo.
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.
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.
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.
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.
Selected text labels
Selected text labels appear only when a destination is activated.
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.
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.
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.
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.
Some apps, such as Material’s Reply, customize and extend the rail to function as both a rail and a navigation drawer.
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.
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.
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.
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.
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.
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.
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.
Rally’s navigation rail uses custom colors for three elements: the container, activated items, and inactive items.
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.
Element
Category
Attribute
Value
Text label
Button
Typeface Font Size Case
Roboto Condensed Bold 14 All caps
Specs
Tablet and desktop
Default
Rail with a FAB
Rail with selected text labels
Compact rail without text labels
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:
xxxxxxxxxx
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:
xxxxxxxxxx
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:
xxxxxxxxxx
There's also a method for detecting when navigation items have been reselected:
xxxxxxxxxx
That results in:
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:
xxxxxxxxxx
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.
xxxxxxxxxx
The header view can also be added or removed at runtime using the following
methods:
Method
Description
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.
Method
Description
@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.
Initialize and show a BadgeDrawable associated with menuItemId, subsequent
calls to this method will reuse the existing BadgeDrawable:
xxxxxxxxxx
As best practice if you need to temporarily hide the badge (e.g. until the next
notification is received), change the visibility of BadgeDrawable:
xxxxxxxxxx
To remove any BadgeDrawables that are no longer needed:
xxxxxxxxxx
See the BadgeDrawable documentation for more information
about it.
Note: The Widget.MaterialComponents.NavigationRailView.PrimarySurface
style will automatically switch between between the component's primary colored
style in light theme and surface colored style in dark theme. More information
in the
Dark theme documentation.
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.
The following is an anatomy diagram for the navigation rail:
Container
Header (eg. Floating action button) (optional)
Destination icon
Destination text label
Divider (optional)
Container attributes
Property
Color
backgroundColor
Elevation
elevation
Width
minWidth OR extended and minExtendedWidth.
Header (eg. Floating action button) attributes
Specify a FloatingActionButton for leading. See the
FAB documentation
for customizing the FAB.
Destination attributes
Property
Icon
icon or selectedIcon
Label
label
Padding
padding
Destination icon attributes
Property
Opacity
selectedIconTheme or unselectedIconTheme
Color
selectedIconTheme or unselectedIconTheme
Size
selectedIconTheme or unselectedIconTheme
Destination text label attributes
Property
Text style
selectedLabelTextStyle or unselectedLabelTextStyle
Label visibility mode
labelType
Divider attributes
Specify a Divider for trailing.
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.