The hamburger menu: pros, cons, and our favorite alternatives

The hamburger menu is, without a doubt, the most enduringly popular navigation bar. And why not? It saves space, it looks neat, and users know what it means — three things that are high up on any UX designer’s must-have list.

But, as with all UX tools, there are downsides, many of which have caused designers to start turning their back on those three little lines. Why? Maybe they prefer working with tabbed menus. Or perhaps, they’re just trying to be different. After all, the fact that everyone is doing it doesn’t mean it’s necessarily right for you.

Let’s take a closer look at the pros and cons of this ubiquitous hamburger menu and run through some popular alternatives.

What is a hamburger menu?

A hamburger menu is the three-line icon in the top right or left corner of most apps. When you tap or click the button, a wider dropdown menu expands to fill the screen. Tap it again, and the menu collapses back behind the icon.

The hamburger menu has been around since the 1980s, when interaction designer Norm Cox created it as part of the interface for the Xerox Star. Yet, it wasn’t until 2009, when mobile apps exploded in popularity, that it really took over. The limited screen space on phone displays made this compact menu design ideal. In fact, the primary reason it’s still used to this day is its space-saving capabilities.

Pros of using a hamburger menu

Navigation is a breeze

Ever heard of decision fatigue? It’s that feeling of disorientation and mental paralysis when you’re presented with too many options. It also happens on websites when there’s too much going on in a design.

We’ve all landed on homepages that are overloaded with content or visuals. Chances are, you immediately abandon these websites because, quite frankly, who has the time or patience to sift through all that information?

This is bad for two reasons: number one, you’ve lost the reader/subscriber/buyer before they even had a chance to see what you’re offering. And number two, it sends the bounce rate of your website sky-high, which will result in Google’s algorithms booting you off the front page (or further).

The hamburger menu is a nifty little solution to this problem. The condensed design conceals surplus information out of the way, letting users decide whether they want to explore further. In the meantime, visitors can absorb the target message on your landing page without a host of distractions.

Everyone gets it

The hamburger icon is as easily recognizable as the meat patty and bun combo it’s based on. This is no small feat. It takes time for symbols to reach an instantly familiar, unambiguous status.

According to Nielson Norman Group, the average user stays on a page between 10 to 20 seconds before leaving. This is why it’s important to make your page fast to load, clutter-free, and as intuitive as possible. If you’re going to use symbols, make sure they’re easy to interpret.

It boosts functionality

The hamburger menu leads your user directly to the information they want. This means they don’t have to drag themselves through your site or app chronologically or fish for information through a trail of links. Saving time is crucial, especially in the context of an app, where space is limited and users want information fast.

Cons of using a hamburger menu

Key information is hidden

One of the biggest downsides of a hamburger menu is that it hides information. Some users don’t get the chance to see how much value the app will provide before those 10 to 20 seconds are up. If the hamburger menu icon is difficult to spot, visitors will have a hard time navigating the site. And many will leave.

You can mitigate this by making your homepage as intuitive as possible. Make sure the most prominent features are clearly visible so visitors won’t overlook helpful information. As a designer, it’s your job to remove obstacles between the user and their destination. You don’t want visitors to have to go searching through your menus to figure out what your app or site is all about.

Click rates are low

Hamburger menus aren’t the most clicked part of the app. Users tend to focus on the info in the middle first and then scroll down. When they want to learn more or can’t find what they want, they’ll turn to the hamburger menu (if you still have their attention). Many users assume this menu is reserved for additional, less important details.

Another reason for low click rates: hamburger icons are hard to reach. They’re usually tucked away in the top right or left-hand corner of your phone, which, if you’re using anything from an iPhone 6 to a OnePlus 6, is really hard to reach with your thumb. Users want the easiest path, so if clicking the hamburger menu involves a grip adjustment or the use of another hand, they’ll choose a different route.

Three popular alternatives to the hamburger menu

As we mentioned earlier, not everyone’s a fan of the hamburger menu, nor is it appropriate for every situation. So without further ado, here’s our take on the most popular alternatives out there.

Floating/prominent hamburger menu

As with regular hamburger menus, they’re space-saving, neat-looking, and intuitive. The difference is the floating menu is moved to a more prominent position on the user’s screen, showing them that the information included there is essential and worth viewing.

The downside is floating hamburger menus still conceal information. And they can take up more space than the original static version.

Tabbed menus

Facebook, Buffer, and Instagram all make use of the tabbed menu. It allows users to see core features immediately and switch between pages without navigating back to the homepage. The buttons are easy to access, and users can clearly see which page they’re on at any time.

The downside? There’s only space for four or five tabs. But surprise, surprise: a smart way to get around this is to make one of the tabs a hamburger menu.

Slide-out navigation panel

Slide-out navigation panels do just what they describe. You swipe to reveal a menu in the same way a hamburger icon expands out to show more options. They’re visually clean and break information down into easily accessible sections. Slide-out tabs are also easy to maneuver without the user having to stretch their thumb up to the corner.

The downside here is you need to be familiar with swipe menus to know how to use them. And the interface can sometimes be a little clunky.

Mega menus

When a website is expansive and designed to deliver a wide range of content, you need a way to eliminate clutter. The mega menu is a large, two-dimensional dropdown panel that appears when you hover over the main menu.

Mega menus are ideal for content-heavy desktop layouts, such as news, e-commerce, and government websites. This type of menu is hidden until you need it and allows designers to create easily scannable categories. Once the mega menu is open, all subcategories are visible without scrolling.

So… should you use a hamburger menu design?

Now, we’ve reached the killer question. And the only honest answer is: it depends on what you want your users to see and do.

If driving users towards content within your menu is a high priority, you might want to consider an alternative. But if your menu mostly contains miscellaneous info that you know users will specifically search for, then a hamburger menu is definitely a viable option.

Make your hamburger menu an asset, not a flaw. Here are eight things to consider:

1. Are your app’s core functions immediately viewable? Make sure users can see your key features on the homepage.
2. Does it directly take your users to the core features you want them to see? Make it simple, and don’t bury information behind too many links.
3. Are the menu items clearly labeled?
4. Is the hamburger menu easy to reach on the bigger phone models?
5. Is your menu visible, clickable, and in a prominent place, so users know there’s more to discover?
6. Make sure your essential info, such as CTA links and subscribe buttons, isn’t placed underneath your hamburger menu. Otherwise, they’ll only get obscured when the user expands the list.
7. Be logical. Set everything out in wireframes to ensure the user journey is effortless to interpret.
8. If possible, run some user tests and A/B test a couple of different variations to ensure the design choices you’re making will have a positive impact on app navigation for your users.

How to make a hamburger menu stand out

A major drawback of the hamburger menu is its tendency to get lost on the page. If you decide to stick with this tried-and-true icon, try to design it in a manner that will grab attention.

Use a framed icon button. We know that minimalist aesthetics reign in design, but people are more likely to overlook a hamburger icon that’s just three tiny lines on a vast background. Those lines are shoved into a tiny corner, and in many cases, there isn’t enough contrast to catch your eye. Use a button icon with a background or line color that contrasts the website, so the menu is easy to spot as soon as you look at the page.

Icon by Tal-revivoIcon by Nolan

Label the menu. It might sound like we’re stating the obvious, but another option is to simply include the word “menu” next to or below the icon. Users naturally follow the flow of words on the page, so labeling your icon increases the likelihood that they will notice it right away.

Make it animated. Anything that moves on a page draws the eyes. If your design is otherwise very clean and minimal, consider animating your hamburger menu icon to make it stand out. Dribbble is an excellent resource for finding creative designs with subtle but impactful animation.

Final thoughts

And finally, the more collaboration and input your designs get, the greater the chances that the end result will resonate with a wide range of users. Try working with a collaborative app that lets you try out multiple menu options and present them to your team for feedback and considerations. The more perspectives you have, the better your outcome will be.

 

This post was originally published on March 7, 2019, and updated most recently on December 30, 2021.