Estimated read time: 4 minutes
I can’t say that I loved the hamburger menu the first time I saw it – early this decade, roughly.￼ How would people know to click there and why does it need to exist? What’s wrong with the traditional navigation?
The traditional navigation on websites was created in the days of one-size-fits-all websites. There were no mobile devices at the time and responsive design didn’t exist yet.￼￼￼
There’s been talk to kill the hamburger menu since at least 2015 and yet five years later it still exists.￼￼￼ Judging by Google search volume the term hamburger menu has also overtaken the term website menu or website navigation which used to be much more popular.￼
There have been different iterations of what the hamburger menu looks like over the years. For example, from the IBM site (top right) it’s the more traditional hamburger menu that just has three lines-for the pieces of a hamburger basically
Many WordPress templates use hamburger menu style navigations and some have added the word menu to the button to make it clear that that’s what people should click.￼￼￼￼ That’s what my design uses on here.￼
The true hamburger menu as pictured above only appears on smaller smart phone screens or iPad screens when they’re held vertically. Holding the iPad horizontally actually displays the menu as the more traditional top navigation with words. Same on desktops.
From most metrics that I’ve seen very few people actually click on sub items in top navigations to begin with￼￼ – other than specific things they are looking for. So with that being the case and when it’s true the hamburger menu definitely has helped declutter things a little bit.￼
It’s still important to have a navigation and maybe a hamburger menu. Personally I’ve gotten used to the hamburger menu type content bucketing. Many other platforms have taken similar approaches. Looking for something specific in an app? There are probably three periods to click on to find that setting. It’s really just another evolution of the hamburger menu except it doesn’t look like a hamburger anymore￼.￼￼
Other icons also exist and usually that’s where information not displayed elsewhere is housed.
Here’s an example from Linkedin:
What to put in your hamburger menu?
The trick is to include everything that might help your target audience and that they might be looking for that you can’t display anywhere else on the page.
Don’t think of it as a dumping ground for unnecessary links but think of it as a place to house links of relevance that can’t be displayed in enough other prominent place￼s. What you might place there depends on what kind of company you are and what your goals are and what your visitors look for.￼￼
Here’s what IBM has in its hamburger menu.
And Slack, the popular messaging app.
Finally, the Washington Post:
￼Basically all companies are listing things that are still highly relevant to what they’re trying to get their websites to do:
- get people to sign up for the conference
- reach out to support
- find out more about the product
- list specific content sections of relevance￼￼￼￼￼
Anything that used to go in a navigation bar would now go into the hamburger menu. That’s probably the simplest way to think of it. But also think of it this way: what are the things that you need to make relatively easy for people to find and that they will actually find there?
Also consider that not all links that used to be in the navigation bar are actually necessary.￼￼ it’s OK to cut certain links-even if some stakeholders won’t love that idea at the beginning. Let’s pull up the numbers to see if anybody clicks on them to begin with. Maybe run a heat map. ￼￼
Other items included in the hamburger menu could also include:
- Contact information
- Career section
- ￼Link to your company blog-although most visitors to your blog will probably come from email and search when the blog strategy is done well￼￼
- Other high-traffic areas
- Other high-impact areas
It’s certainly important to keep an eye on the metrics to see what other areas draw a lot of relevant traffic and consider posting links to them as well.
Depending on your site’s setup top level pages might also be listed but we also don’t want to overdo the navigation. From my experience when there’s too much stuff in the navigation-whether it’s a hamburger menu or traditional menu nobody is clicking on anything anyways. And sometimes it makes it hard to find what you’re looking for.￼￼￼
Will the hamburger menu disappear?
I don’t think the hamburger menu will disappear anytime soon and the current best practice with the hamburger menu on mobile and the expanded menu on larger screens-seems to work extremely well and does the trick.
I find that model also much more user-friendly than when the navigation wraps to a second line on smaller screen. Moving from a full navigation with specific navigation items that fit the screen to a hamburger menu on a small screen seems to be much more user-friendly to me. I would call that a best practice and hop it sticks around. Unless somebody invents a better solution.
What are people saying on Twitter about the hamburger menu? Check out this poll and leave a comment with your opinion.￼￼