Navigation Rail

navigation

Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.

Properties

Name Type Required Default Description
alignment enum - start Vertical alignment of navigation items

Accessibility

Role: navigation
Keyboard Support:
  • Tab - Move focus to rail
  • ArrowUp/Down - Navigate between items
  • Enter/Space - Activate item
Screen Reader Notes: Rail should have aria-label. Active item should have aria-current="page". Items need accessible labels.

LLM Context

Intent: Provide compact primary navigation on tablet and desktop
Anti-Patterns:
  • Rail without aria-label
  • More than 7 destinations
  • Using rail on mobile
  • Items without icons
Example Usage: 
<md-navigation-rail><md-navigation-rail-item active><md-icon slot="icon">home</md-icon>Home</md-navigation-rail-item><md-navigation-rail-item><md-icon slot="icon">search</md-icon>Search</md-navigation-rail-item></md-navigation-rail>
<md-navigation-rail><md-fab slot="fab"><md-icon slot="icon">add</md-icon></md-fab><md-navigation-rail-item active>Inbox</md-navigation-rail-item></md-navigation-rail>