Ready

App Drawer

The App Drawer displays the global navigation in a vertical format for effortless scanning.

Ready

App Drawer

The App Drawer displays the global navigation in a vertical format for effortless scanning.

Ready

App Drawer

The App Drawer displays the global navigation in a vertical format for effortless scanning.

States

States

States

  1. Collapsed

  2. Expanded

  1. Default

  2. Hover

  3. Active

  4. Item Collapsed

Behaviors

Behaviors

Behaviors

Breakpoint Behavior

  1. X-large: When expanded, app drawer will push page content to the right and can remain open when user is working. � 3

  2. Large and below: When expanded, the app drawer will display over top of the page content and will collapse when the user interacts with the page content. � 3

More

More

More

Related Components

Related Patterns

Additional Reading

  1. Top vs side navigation: Which one is better for your product? https://uxdesign.cc/top-navigation-vs-side-navigation-wich-one-is-better-24aa5d835643

  2. Best UX Practices for Designing a Sidebar https://uxplanet.org/best-ux-practices-for-designing-a-sidebar-9174ee0ecaa2

  3. Left-Side Vertical Navigation on Desktop https://www.nngroup.com/articles/vertical-nav/

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies