…or Why the Hamburger Icon is Awesome.

This article was originally published on 16 April, 2015 at Codepen.io.

I've read plenty of anti-hamburger icon posts that came out after Mike Stern's rant at WWDC '14. The issue I take with those articles - and Mike's rant, for that matter - is that they aren't addressing the icon. They're addressing the menu.

Hamburger Icon vs. Hamburger Menu

The hamburger icon - three vertically stacked horizontal bars - is most often the iconography selected for a button that opens an action menu. The terms used to refer to that menu are vast in number and so I'll not attempt to list them all but I can at least give you the most common: drawer, sidebar, or - least commonly - a hamburger menu. The hamburger icon typically does what you would expect based on it's design. The hamburger menu, however, can be virtually anything from a list of pages on a website to a multi-tiered tree of navigation allowing you to traverse your overly complicated email labeling system.

The issue is that the icon is the one that's getting a bad rep as if it did something wrong when that could be no further from the truth. The icon does exactly what you would expect it to - open a visual representation of itself. Typically, however, the menu is the one causing all the ruckus. WTF, mang?

W.
T.
F.

Menu vs. Nav

To explain why the menu is causing so much fuss I feel like I need to clear up a terrible ambiguity.

Menus

Menus are, in their most basic form, intended to facilitate action. When you right-click on a selection and you see cut, copy, and paste? That's a menu. Save and delete buttons? Those should be in a menu. HTML5 even added a <menu> tag with some super sweet features built into it. Check out this pen for an example of my typical usage of the element.

Navs

Navs are (I would hope obviously) intended for navigation. If I click a button or link in a <nav> element then I should be taken to an entirely new page. It should be like a wondrous adventure to a new, far off land where unicorns roam free and everybody is eating s'mores and pooping rainbows. The most actionable thing you should do when I click on a link is prompt me about unsaved changes.

Why Does Any Of This Matter?

The main argument that Mike and the rest of the anti-hamburger movement makes is that it's bad UX when the menu pops out and covers up the rest of your perfect, delicately designed interface. That's totally legit. If I have to cover up whatever I'm doing to cut the paragraph I just selected? You better believe I'm gonna find a better text editor.

However, if this is the navigation I'll be using to take myself to Magic Unicornland™ then I already have intentions of leaving the page. Eff that stupid interface of yours, I just want to get where I'm going.

The Point

I've been hemming and hawing but for why? It's because the hamburger icon? That guy is my bro. I always turn to him when I don't have enough unicorns in my life. Menus? They're my bros, too, they just aren't used correctly as often as they should be.