HTML Elements: Menu vs. Nav
Tags: html, webdev, ux
Published: 2019-06-04 03:20:50

## …or Why the Hamburger Icon is Awesome.

**This article was originally published on 16 April, 2015 at [Codepen.io][canonical].**

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.





[canonical]: https://codepen.io/trezy/post/menu-vs-nav-or-why-the-hamburger-icon-is-awesome