10 pros and cons of the hamburger menu (with examples)

The hamburger menu is a navigation element you can find on websites, apps, and programs.

Its delicious name comes from its design: it’s comprised of three horizontal lines resembling, well, a hamburger. And much like its real-life counterpart, the hamburger menu is a space-saving mechanism.

But it’s an icon that’s embroiled in controversy. For some, it’s an essential part of the designer’s toolkit. For others, it’s a confusing byproduct of bad information architecture.

Lettuce dive into the hamburger menu now and help you ketchup to the meaty history surrounding this bun-tton.

Sorry, I can’t help myself. I’m on a roll.

(Okay, I’ll stop).

What is a hamburger menu?

The hamburger menu, or the hamburger icon, is the button in websites and apps that typically opens up into a side menu or navigation drawer.

It was created by interaction designer Norm Cox for the Xerox Star personal workstation in 1981 as an easy way to communicate to users that the button contained a list of items.

While we use hamburger menus today in order to ease up the navigation experience, the purpose of the original hamburger menu was different.

“I designed that symbol many years ago as a container for contextual menu choices,” Cox said in a 2014 interview. “It’s somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button.”

After the Xerox Star, though, the hamburger menu stayed quiet. It was only when UX designers had to find a way to fit a multitude of buttons onto the tiny screens of our phones that the menu started re-appearing everywhere.

Since then, the hamburger menu has become the go-to icon for apps and websites to drop in their navigation buttons.

Now, the hamburger menu has become the icon that designers love to hate. After all, do people actually click through to hamburger menus? And even if they do, if the menu items were so important shouldn’t they be shown all the time?

During a talk the Worldwide Developers Conference in 2014, designer and Apple UX Evangelist Mike Stern railed against the hamburger menu, saying:

“Remember, the [two] key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go.”

“Hamburger menus are terrible at both of those things because the menu is not on the screen. It’s not visible. Only the button to display the menu is.”

But does that mean you should get rid of the infamous three-lined icon—or is it time to stop worrying and learn to love the hamburger menu?

3 pros of the hamburger menu

Pro #1: Recognizable

The hamburger menu is ubiquitous—found everywhere from apps, to websites, to computer software and video games.

It’s even somehow found its way to print.

Hey @Tesco the menu on your leaflet seems to be broken.
You’re welcome 👍🏼👍🏼🤓 pic.twitter.com/7X7l6WRLND

— Martyn Reding (@martynreding) February 16, 2019

It’s an icon that has spent decades embedding itself in the social consciousness as the button where users can access the navigation drawer. People know it and can rely on it for that purpose, like how users know a trash can icon is where you can delete files, or the home icon is where you can go to the main menu.

As designer Oliver McGaugh wrote on Usabilla, “I see no reason to hate on something which fulfills its purpose. Which is so widely known that it holds its own standard. Why kill a ubiquitous icon, which our users know and understand, and replace it with a new iteration for them to learn all over again?”

Pro #2: Clean

Is there anything worse than a messy web page? For example,

And in places where visual real estate is at a premium, like mobile apps and websites, the hamburger menu can bring incredible valuable.

After all, you never want to overwhelm your users with too many choices. When presented with a wealth of choices, people are likely to get frustrated and not make a choice at all.

One study conducted by decision making expert Sheena Iyengar found that people are 10x more likely to make purchases when presented with fewer purchasing options.

That’s why the hamburger menu can be a great way to clear up an otherwise messy page.

It’s a simple solution. It’s unassuming. And it doesn’t get in the way of your user’s experience. So, if you’re looking for a way to include easy access to your navigational menu without bogging down your users, a hamburger menu is a good answer.

Pro #3: Secondary access

The hamburger menu can be a great place for navigational buttons that don’t directly service the goal of your web page.

Uber wields the hamburger button for this purpose. The app has one goal: Order car. So the main screen is singularly focused on booking you a vehicle.

For things like records of your past trips, receipts, and payment settings, you’ll have to click on the hamburger menu—since they’re not as important to the primary goal.

While these buttons are important for certain tasks, they don’t need to take up all that space on the main screen. That makes the hamburger menu a perfect place for them.

3 cons of the hamburger menu

And now, we dig into why exactly the hamburger menu is one of the most hated icons in the design world.

Con #1: Makes pages less important

One of the biggest gripes designers have with the hamburger menu is that it immediately makes whatever is in the menu less important.

Think of your website like a music festival. The hamburger menu is the small stage. You wouldn’t want to put your best artists and headliners there. Instead, you want them on the biggest stage where everyone can see them (i.e. the main page).

It’s the same with any digital experience you’re designing. When you relegate navigational buttons and pages to the hamburger menu, you’re communicating that these things aren’t as important — and making them far less likely to go there.

That brings us to our next con:

Con #2: Low engagement

Hamburger menus have dramatically lower click rates (and engagement) than other buttons, which can be attributed to a number of reasons.

First, they are hard to reach. With phones getting bigger with each generation, it’s becoming increasingly difficult to reach places where the hamburger button is typically found (top left or right corners).

Second, when users don’t see their navigation options, they’re far less likely to engage with them. Think: to use a hamburger menu users have to:

1. Realize their preferred menu item isn’t visible
2. See the menu
3. Know what a hamburger menu is and that its a thing they can click
4. Click it
5. Scan the list of additional menu items
6. Find the one they are looking for
7. Click it

That’s a lot of cognitive load for something so simple. For example, when the Zeebox app removed the row containing their navigation buttons in favor of a hamburger menu, they saw their engagement numbers halved.

One study by the Nielsen Norman Group found that, when using a hamburger menu, discoverability is “cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.”

They concluded that users have a worse experience when the navigation buttons are hidden, both in mobile and desktop interfaces.

Even big players like YouTube recognized the impact the hamburger menu was having on their engagement numbers and have moved away from it.

Con #3: Inefficient

Any good designer knows that making users go through extra steps to get to their end goal is a big no-no.

The hamburger menu does exactly that.

Imagine you were looking for to sign up for fitness coach and went to their site to learn more. Would you rather a link/button to the contact page be:

1. A) Right on the home page
2. B) Behind the hamburger menu

Of course you’d rather it be presented to you right away. That’s crucial information for someone looking for a fitness coach! You don’t want to have to search for what you’re looking for.

8 examples of hamburger menus

We’ve created a list of eight examples of hamburger menus in action. They’re a mix of apps, desktop websites, and mobile websites—but each uses the hamburger menu well.

🍔 1. Coachella

The producers of Coachella know that the people going to their website are looking for information on how to get tickets and join the waitlist for passes (especially before they announce the lineup), so the designers aren’t going to bog down the main page with a search bar and information on different vendors. Instead, they give the people what they want right off the bat.

🍔 2. Frame.io

Video software developers, Frame, keep their main page dedicated to one goal: collecting leads.

Plus, check out that cool hamburger icon.

🍔 3. Google Drive

Google offers the user exactly what they want right away (i.e. their documents and files) and uses the hamburger menu for less important elements (i.e. settings, help). With the navigation buttons hidden away in the hamburger menu, the user’s attention will be more focused on the primary task.

🍔 4. People Nerds

People Nerds

For Dscout’s People Nerds event, the design and software company decided to go the tongue-in-cheek route and put an actual hamburger emoji for the hamburger menu. Dscout knows that their target audience will be people very familiar with the world of design, so they can play around with things like making the hamburger icon an emoji.

🍔 5. Codrops

A very fun hamburger menu design from the folks at Codrops, a design blog offering tutorials and demos of different site designs for free. Notice the more subtle elements, like how the hamburger menu turns into an X=.

🍔 6. Portuguese Chimneys

A hamburger menu for a website dedicated to the architectural beauty of Portuguese chimneys. Seriously.

🍔 7. My Fitness Pal

This is a hamburger menu to track your hamburgers—and if you think we included it in this list just so we could make that joke, you’d be right.

However, it’s also a great example of how the hamburger menu can be used to store less important navigation buttons. When a user gets to the app, they likely just want to record their calories for the day and move on. This page allows for that easily in the bottom right hand corner.

🍔 8. Memrise

Did you know that hamburger menu is menú de hamburguesas in Spanish? With the Memrise app, you could have learned that and more.

Memrise’s hamburger menu works well because your main action is to take your course, whereas your secondary action might be to switch courses.

_

Ready to use a hamburger icon in your own design? Try designing with a hamburger icon with Velocity our UI kit available in InVision Studio, Photoshop, and Sketch.