The Drawer pattern allows the user to open and/or switch between different application features. A Drawer primarily displays a menu of navigation options, which can show additional features including: search, profile, notifications, branding, etc.

Benefits of using Drawer:

This pattern is common for phone and tablet, with growing adoption for desktop usage.


Appearance characteristics for this pattern.


Common behaviors for this pattern.


Usage guidelines for this pattern.


Fig 1. Drawer Open


Fig 2. Drawer Closed


Fig 3. Drawer Drill In


Fig 4. Drawer Drill Out


Fig 5. Drawer Toolbar


Fig 6. Drawer Persistent Search


Fig 7. Drawer Hidden Search


Fig 8. Drawer Empty Search


Fig 9. Drawer Auto Suggest