dark App Logolight App Logo
Get started
Develop
Foundations
Styles
Components
Patterns
Resources
Contact

Navigation rail

Navigation rails enable users to navigate between the first level of an app's navigation on mid-sized and large-sized devices

  • Use navigation rails in medium, large, and extra-large screen sizes
  • Ideally, navigation rails should contain 3-7 destinations, plus an optional FAB, but they can accommodate up to 10 destinations
  • Navigation rails should always be placed at the same place, even on different screens of an app
  • Keep destination labels short and concise to avoid text truncation
  • Always use the provided Atmosphere Design System Icons Library

Resources

Type Resource Status
DesignFigma: Atmosphere Foundations and Components LibraryAvailable
DesignFigma: Atmosphere Icons LibraryAvailable
ImplementationGitLab: Angular web componentAvailable