Navigation Rail
Navigation rails provide access to primary destinations in an app when using tablet and desktop screens. They are a vertical bar that appears on the side of the screen.
Overview
The navigation rail is a Material Design component optimized for larger screens like tablets and desktops. It provides a compact, persistent way to navigate between top-level destinations. Unlike bottom navigation (mobile), the rail uses vertical space efficiently.
Live Preview
Home
Main content area for the selected destination.
Brand Properties
The following table shows Navigation Rail properties with Material Design 3 defaults and brand-specific values.
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| Container Color | Color | #FEF7FF | #FFFFFF | #FFFFFF |
| Active Indicator Color | Color | #E8DEF8 | primary/20% | primary/20% |
| Active Icon Color | Color | #6750A4 | #038012 | #1A5129 |
| Inactive Icon Color | Color | #49454F | #6B7280 | #6B7280 |
| Container Width | Number | 80dp | 80px | 80px |
| Active Indicator Width | Number | 56dp | 56px | 56px |
| Active Indicator Height | Number | 32dp | 32px | 32px |
| Active Indicator Radius | Number | 16dp | 16px | 16px |
| Icon Size | Number | 24dp | 24px | 24px |
| Label Font | Font Family | Roboto | Open Sans | Open Sans |
| Label Size | Number | 12sp | 12px | 12px |
| Destination Gap | Number | 12dp | 8px | 8px |
Anatomy
- Container - The rail container holding all destinations
- FAB (optional) - Floating action button at the top
- Menu Icon (optional) - Hamburger menu for additional navigation
- Destinations - 3-7 navigation items with icons and labels
- Active Indicator - Pill-shaped highlight on active destination
Behavior
- Can expand to navigation drawer on interaction
- Typically paired with top app bar
- Remains visible during content scrolling
- 3-7 destinations recommended
- Labels can be hidden or always visible
Accessibility
- Use
role="navigation"on the container - Provide
aria-labelfor the navigation landmark - Use
aria-current="page"for the active destination - Ensure all destinations are keyboard accessible
- Icons should have accessible names via
aria-label
Related Components
- Navigation Bars (mobile alternative)
- App Bar
- FAB