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.
The navigation rail is ergonomic, consistent, and adaptive.
The navigation rail is a compact arrangement that puts high-priority destinations within reach on large screens.
The rail should appear consistently on the same side of each screen in an app.
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
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.
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.
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.
Navigation rail destinations are always represented by icons that can symbolize the content or the nature of a destination.
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.
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.
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.
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.
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 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.
If all icons in the navigation rail can be expected to have clear meaning to users, labels can be omitted as a group.
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...
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.
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 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.
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.
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.
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.
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.
2. Active icon, active text
3. Inactive icons
Rally’s navigation rail uses custom typography for destination text labels.