1 Navigation

YaaS IO uses an off-canvas navigation pattern to maximize screen real estate. A “parent/child” relationship is used to control the views in the panels. The “parent” panel should contain all navigation items and the ‘child’ panel should contain the content or tooling meant for interaction. It is not recommended additional panels are created or nested within the existing parent/child structure as this will put the overall flow and focus of content at risk.

1.1 Mobile Navigation

At the mobile inflection point menu is closed by default.

Menu expanded





Yaas Menu expanded

1.2 Tablet Navigation

At the tablet inflection point menu is closed by default.




Menu expanded



Yaas Menu expanded

1.3 Desktop Navigation

At the desktop inflection point menu is open by default with a clear indication of how to close to take full advantage of the available screen real estate.