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

Navigation drawer

Navigation drawers provide multi-level navigation on small, mid, and large-sized devices

  • There are three types of navigation drawers: standalone, standard, and modal.
  • Use standalone and standard navigation drawers for medium, large, and extra-large screen sizes.
  • Fixed standard navigation drawers are recommended for extra-large screen sizes.
  • Modal navigation drawers work best for smaller and medium screens, but they're suitable for all sizes.
  • Modal navigation drawers can be opened and closed by default.
  • Use navigation drawers when you have more than ten top-level destinations. They can also be used to accommodate more than one level of destinations.
  • 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