The Navigation Drawer
A navigation drawer is a menu that slides out from one of the sides or the top of an app when a user clicks or taps the menu button. The navigation drawer contains a list of sections. The menu button is usually represented by a drawer icon (also known as hamburger icon) and often has the word “menu” or “sections” next to it.
The decision to employ a navigation drawer should be based on the structure of the app. Navigation drawers should be employed when there are more than 5 sections. Common actions (e.g. search) shouldn’t be delegated to a navigation drawer and instead should be displayed on a main view.
Using a navigation drawer is a good way to optimize space if most of the user experience occurs in one view. This pattern may not be the right choice if the users primarily navigate the app through a few sections.
The navigation drawer gained popularity with the rise of mobile apps. Hiding a menu until it was needed became a standard practice because screen space was limited on mobile devices.
Navigation drawers are often seen on responsive websites. The main navigation is displayed in view until a user sizes his browser window down or renders the website on a mobile device.
Below are some navigation drawers in the wild.
