• Mobile App Design
• Web Design

Hamburger Menu a.k.a. Drawer Menu: Prominent Evolution of UI

You could notice that with popularity of Android some elements of its design spread to non-mobile interfaces. The most noticeable, I believe is Hamburger menu (also known as a drawer menu). Why Hamburger? This element of UI is a representative icon, which looks like (guess, you got it now). So, now you can see it reminds the layouts of a hamburger – upper bun, stuffing and lower bun.

* * *

Details

From its very beginning the hamburger menu formed as a separate unit in the Android app. It played a role of a user navigation element, adapted for mobile touch-screen devices. Once you clicked the element, usually a dropdown menu appeared, so you could choose the category you needed. I think you meet this element every day in you smartphones: such giants as Facebook, Google+ and YouTube are using the drawer menu.

* * *

But the most interesting thing about the hamburger menu is that it began to conquer a simple desktop web. Pinterest, a trendy social media, which quickly gained popularity on the web, used from its start a drawer menu for category dropdown. And still uses. Pinterest is a great example of a modern original design, so it can be viewed as significant in this case (meaning it became an example to follow for many developers).

More Fashionable Examples

Made By Block

* * *

Squarespace

* * *

Making Space for Others

* * *

Protect Our Waves

* * *

Nordkapp

* * *

Reasons of Success

So, why is it so widespread? I can outline few reasons of its active usage.

• – It’s simple and, therefore, comfortable. You could notice the tendency for minimalist design on the web in recent years. Hamburger menu seamlessly fits the image of modern website.
• – The dropdown menu appears only when needed. Earlier we had to suffer monstrous menus without possibility to remove them. The drawer menu has been successfully killing them as a species till now. Hooray!
• – The hamburger icon is fixed and always visible, so you can make the dropdown menu appear, once you want it to see.
• – Universal for all the responsive versions of the website: mobile and desktop. It will definitely help you to design different version more effective and to make them thematically united.

* * *

Well, the hamburger menu is a prominent element of modern internet culture. I can even say that it characterizes the certain period of UI evolution, like, for example, a floppy disk for save buttons earlier. To put or not to put the drawer menu in your project is up to you. However, I believe the approach to this element should be creative, so a new type of an internet look can be designed. And maybe the author of this fresh UI will be you, who knows.

Leave you examples of good websites, which use the hamburger menu.

About the author:

Art Rivera: Deeply interested in everything connected with Internet, I sincerely suppose the web is the only future reality for the humanity through its inevitable involving into every part of human life. I’m not a great fan of cyberpunk concept, but the world is keeping that certain direction of total connectedness. And of course there should be someone, who can write the history, who would describe and analyze and enter in the record all notable changes and tendencies on the web. Hello, it’s me.