Any website that has more than one page needs a menu. It’s a standard website element and one of the few things almost all websites have in common.
Your menu is often one of the first things visitors look for on your website, since it’s the easiest path to learning what the site contains and how to find the parts of it they care about.
Which is all to say: your menu is important.
That may have something to do with why a deviation from the norm in menu design can be a controversial topic. The hamburger menu has been around now for a while, but it’s been a controversial design choice from early on. Back in 2014, TechCrunch straight up called it the devil. But as smartphone use has grown, use of the hamburger menu has become a common design choice.
What is this tiny icon that gets people so riled up?
You might like…
What is the Hamburger Menu?
The hamburger menu is the common term used to describe the little three-lined icon used on many websites and apps to represent the larger menu. It most often shows up in the top left corner (but not exclusively), and clicking on it opens up the full menu.
Hamburger menus are especially popular on mobile websites and apps, where space is at a premium and getting a menu with several options to fit is challenging. But you’ll also often see it on the desktop version of websites as well.
5 Pros of Using a Hamburger Menu
Hamburger menus have their share of haters, but they serve a purpose. They’ve had staying power in the face of critics for a few main reasons.
1. Hamburger menus take up less space.
This is the reason hamburger menus exist to begin with, and why most websites that deploy them choose to do so. When creating a website, you have to figure out how to pack all the important information your visitors may need in a small amount of space. Hamburger menus are an efficient way to get more navigation options into a smaller package.
2. They allow for a cleaner webpage.
Many visitors (and designers) prefer a minimalist aesthetic—websites that are cleaner and only include the design elements required for basic communication and functionality. When a website has too many images and information packed into a small screen, it can look sloppy and confusing. Using a hamburger menu cuts down on how much visitors have to process when taking in your web page at a glance.
3. For menus with a lot of pages, they mean less clutter.
If you have a simple website with five pages or less, including them all in your main menu on desktop may not be a visual challenge. But for websites that have a lot of different pages and categories, figuring out how to communicate all that to your visitors without overwhelming the page is a design challenge. And an overly complex menu can end up distracting visitors from the main part of the page you want their attention on.
For instance, on an eCommerce website—you want them to focus on your products and information that makes them more likely to buy. But if your eCommerce store has products that fall into a dozen or more categories, you also want visitors to be able to easily find the ones they’re interested in. A hamburger menu gives you a way to make sure visitors can find the full list of categories, while still designing each page to draw attention to the product you want them to focus on.
4. By now, they’re familiar to most people.
Any design element that contains functionality needs to be intuitive to visitors, or it defeats the purpose. Using a hamburger menu to save space on your web page would backfire if your visitors couldn’t figure out to click on it to see their menu options. That was a valid concern a few years ago, but by now most visitors know what a hamburger menu means when they see it. You can reasonably assume that they won’t leave your website confused about how to find the menu.
The emphasis on most here is intentional though. Hamburger menus are intuitive to anyone who uses a smartphone regularly, or anyone who spends enough time online to be used to common web design elements. If your target audience includes people who likely don’t spend much time on a mobile device or browsing the web, there’s a chance they may still be baffled by your hamburger menu. As in all things web design, think first about who your audience is and what makes sense for them.
5. You can use them to remove distractions, without losing functionality.
Hamburger menus are often used to replace a website’s main menu, but that’s not their only possible use. Some websites use them alongside their main menu to provide additional options or more information that doesn’t fit easily on the main page.
By removing visual distractions from the page, you can more effectively keep visitors’ attention on the main piece of information you most want them to notice. A hamburger menu can be a tool to help you do that, without removing the other options visitors may want to take entirely.
5 Cons of a Hamburger Menu
We’ve covered the reasons to like it, so why does it still have a bad rap? Critics of the hamburger menu cite a few main issues with it.
1. It makes your navigation options less visible.
When your main menu is visible on the page at all times, every visitor can quickly see what the main category and page options are without doing any extra work. When you put all that information behind a hamburger icon, suddenly only a subset of visitors—those that make the choice to click—will have that information.
That can make finding what they’re looking for a bit more difficult and unintuitive for visitors. And it could mean some visitors don’t seek out pages they’d be interested in if they knew they were an option, because they never see a link to them.
2. It adds extra steps for the user.
An extra click doesn’t sound like that much work. But in terms of how we use the internet, adding any extra step to the process—no matter how simple—becomes a barrier that many users simply won’t take. Ease of use is paramount to web design. You want to make it as simple as possible for visitors to see and do everything on your site you want them to.
Noticing a website has a hamburger menu, going to click on it, and then looking over your navigation options—that’s all more work for your visitors. Many won’t mind doing it at all, but some won’t bother. And for those people, you lose the chance of them seeing important navigation information.
3. People may overlook it.
Part of the appeal of the hamburger icon is that it’s small and out of the way, but that can also be a weakness. That’s what makes it so easy to overlook completely. Many of your visitors—especially those that spend a lot of time on mobile devices—will instinctively know to look for it when looking for menu options.
But your audience may well include people who don’t automatically seek out that hamburger icon. For them, hiding your menu behind the icon could mean they never notice your menu options, and don’t bother exploring your website as much as they may have otherwise.
4. It’s harder to include tiered menus.
Many websites not only use categories to organize their pages or products, but also have a number of subcategories. A pet store may have animal types as its main level of categories (dogs, cats, rabbits, etc.), but then subcategories under each for the types of products they sell for each animal.
When your main menu is spread across the top of the screen, it’s easy to add those subcategories in the dropdown menu. With a hamburger menu, it’s possible to add subcategories underneath each main menu item in your list, but the design structure doesn’t lend itself as naturally to this type of tiered menu. If your website structure includes a lot of subcategories, a hamburger menu might not make as much sense for you.
5. It can reduce engagement.
A 2016 study by Nielsen Norman Group looked at how likely visitors are to actually use hidden navigation options, like those behind a hamburger menu. They found that desktop users only did so in 27% of cases, and that they used more visible menus almost twice as much. On mobile, hidden navigation options fared better, but were still outperformed by websites that used a combo of hidden and visible navigation options.
This suggests that many of your visitors simply won’t bother taking that extra step of finding and clicking on the links you put behind a hamburger menu, which may translate into lower engagement rates on your website.
Should You Use a Hamburger Menu on Your Website?
Knowing general pros and cons is useful in measuring the choice for you, but ultimately it depends on what makes sense for your audience. And if you’re not sure, the best option is to test.
While the Nielsen Norman Group found clear evidence for avoiding hidden menus, a more recent test reported in CXL found that use of a hamburger menu actually increased revenue for an eCommerce business. In this particular case, the website’s visitors predominantly used the website on mobile devices. And they found that putting the icon on a pink background and adding the word “Menu†got even better results.
Does that mean you should add a pink hamburger menu on your website right now? Nope!
They decided what menu variations to try out based on their current website’s design and data on how people were viewing the site. To figure out what makes sense for your website, take these 3 steps:
- Look at what your current analytics tell you about your visitors: who they are, what devices they use to visit your website, and how they interact with the site now.
- Based on your current data, develop a hypothesis about what menu options you think may perform better than what you have now (if any).
- Set up A/B tests to see if your hypothesis is right.
You never want to add a design element to your website because you heard it’s trendy or you feel like you’re supposed to. Always consider what makes sense for your particular site and, even more importantly, your visitors.
How to Add a Hamburger Menu to Your Website
If you’ve weighed all the pros and cons, analyzed your analytics, considered your audience, and have decided a hamburger menu is the right choice for your website, now you need to know how.
If you have a WordPress site, you have two main methods for adding a menu:
- Choose a theme that has a hamburger menu
- Use a plugin
The first option probably makes the most sense if you’re building a new website, or considering a full redesign. In that case, when perusing your theme options, look specifically for one that already includes a hamburger menu. You can find a list of popular options that already have a hamburger menu here.
If you want to add a hamburger menu to your existing website without having to do a full overhaul of the site, you have a few different plugin options to choose from. Two of the most popular options are the Responsive Menu plugin and Slick Menu plugin. Both will let you customize how your menu looks, and ensure you can get it set up without having to do any coding.
Hamburger or Not? Up to You
Every website is different, and deciding what will work for yours is up to you. Hamburger menus are one more design element to add to the possibilities for your site. They may help you do more with less in the space you have available, or you may determine they’re likely to be more confusing than they’re worth for your visitors.
Whatever choice you make, keep your visitors top of mind and make sure you’re building a website that will work for them.
Kristen Hicks is an Austin-based freelance content writer and lifelong learner with an ongoing curiosity to learn new things. She uses that curiosity, combined with her experience as a freelance business owner, to write about subjects valuable to small business owners on the HostGator blog. You can find her on Twitter at @atxcopywriter.