The UI design landscape is always changing with new trends and technologies. In a past article we covered responsive navigation trends but in this post I want to focus specifically on one controversial trend: the hamburger menu.
You might recognize this as the slide-out menu with the three bar icon that looks like a tiny digital hamburger. It has been rapidly adopted in all areas of UI/UX over the past few years. But how well does it work in web design?
I’ll dig into the history of the hamburger menu – studying where it came from, how it moved onto the web, and where it could go in the future.
A Hamburger History
The original three-bar icon was never called a hamburger icon, but it worked just the same as today. The history of this icon dates back to the Xerox Star from 1981. It was created by Norm Cox and only ran on the Xerox 8010.
You can see this icon a few times in this old footage of the Xerox Star. But shortly after its release the icon did a disappearing act for a few decades, only to emerge again in the late 2000s with the booming smartphone market.
Norm Cox shared his thoughts in a brief interview with Small Business Trends discussing the icon and how it came about. Cox says “I have to chuckle at all the attention that little “hamburger” symbol is getting lately” and shares his thoughts on the icon’s recent resurgence.
It was always a very simple icon with an obvious visual cue. It represents lines of text in a list format. This makes sense for a vertical navigation menu and it certainly fits on smartphone screens.
Around the same time as the smartphone gold rush we also stumbled into the world of responsive design. Ethan Marcotte wrote a fascinating piece back in May of 2010 discussing how responsive design works and how it could change the web.
Websites were soon being designed for smaller screens and they too began adopting the hamburger menu. As time went on this little icon became a natural solution for any hidden menu and it has since grown into the behemoth we see today.
Modern Hamburger Menus
Nowadays the design community has mixed feelings about hamburger icon menus. While these icons do work well for keeping links off the page, they can lead to discoverability problems.
However more and more people are learning what this icon means, so it’s becoming much harder to argue against it. There’s no denying that hamburger icons are growing in popularity and they’re here to stay for a while.
But I think every designer needs to consider the value of this icon and choose whether it can fit well into each project.
Let’s take a look at some of the pros and cons to see how they stack up.
- Simplest way to handle large menus on smaller screens
- Becoming more recognizable with each passing year
- Works best for blogs where nav links don’t matter as much
- Harder for average visitors to find the menu
- The hamburger icon isn’t clear to everyone
- Menu access always requires an extra click
I’d boil this all down to the fact that hamburger menus aren’t fully recognized as off-page menus which can lead to confusion. And even people who do recognize the icons may not want to click every time to access the menu links, potentially leading to higher bounce rates.
I personally love the hamburger menu but only when used in proper context. It does not work well on all websites and it’s probably not the best go-to solution for every web project.
But it does work. And more people are becoming familiar with what the symbol represents.
If you want some differing opinions on the UX viability of hamburger sliding menus then check out these articles:
- Analyzing the Effectiveness of Hamburger Menus in Web Design
- Why It’s Totally Okay to Use a Hamburger Icon
- The Genius—and Potential Dangers—of the Hamburger Icon
Hamburger Menu Design Trends
It’s easy to discuss how a hamburger menu should behave or why it works a certain way. But when you look into examples that’s when you can really see how this icon operates in the real world.
Take for example the Comedy Central homepage. Their full navigation menu is super easy to use and when it’s in full view it spans the entire page width.
But when resized smaller the menu disappears and hides behind a small three-bar hamburger icon. When you click it still offers the same links in a slideout menu, but they may be difficult to access if you’ve never used this menu before.
I’ve seen a lot of these slideout menus on the web and Comedy Central’s execution is one of the best. It has very high contrast, uses multi-tiered links, and works on all devices and screen sizes.
The goal of a great design is to ideally please everyone all the time. Unfortunately this is a fantasy and never happens, so the next best thing is to please as many users as possible with a menu they understand.
Another example can be found on the Cartoon Brew layout. This blog has fewer links than Comedy Central so the nav drops down into the page rather than sliding from offscreen.
But because it’s so simple and it blends so well I think the user experience fits perfectly. Many users won’t even bother to browse the navigation so this menu is also of less immediate value.
On the flip side take the menu on Barbell Apparel. E-commerce sites have to consider navigation carefully because these links are essential compared to a simple blog navigation.
One thing I like about this design is how they add the word “menu” beside the hamburger icon. This helps to guide visitors who might not recognize the symbol, and it doesn’t take up much extra space.
If you’re concerned that some users won’t recognize the icon then try replacing it with the word “menu”. This works just as well and it still utilizes the same technique by getting nav links out of the way to place the main content front & center.
Best Free Resources
Let’s wrap up by covering a few of the best hamburger/sliding drawer plugins you can use for web projects. These are all free and open source so you can re-use and edit them to your liking.
Plus new plugins get released all the time so if you don’t like any of these feel free to hit Google in search of an alternative.
This is perhaps one of the oldest sliding menu plugins and it offers some of the greatest support as well. The jQuery mmenu plugin comes with a pure jQuery solution and even a WordPress plugin to boot.
It does all the heavy lifting by converting your navigation into a sliding nav once you reach a certain viewport. You can customize a lot of the features and there’s full documentation on the plugin website.
A lesser-known solution is SlickNav which uses a dropdown feature tied to the hamburger icon. With this plugin you can add hidden menus that slide on top of the page with ease.
I’ve used jPanelMenu a few times and it has always been super easy to implement. It’s built on top of jQuery and it makes sliding hamburger menus crazy simple.
I personally find this plugin better for mobile webapps rather than full websites. It uses a custom scrollbar and it fits more with the webapp design aesthetic, but it can work well on any major website for any sized navigation menu.
Responsive Menu for WordPress
WordPress is the most commonly used CMS for very good reason. It comes with thousands of free themes/plugins, one of which is the Responsive Menu plugin. This works as a slideout menu and is always updated for the current version of WordPress.
In my experience the hamburger menu has done nothing but grow and take over the responsive design world. I can’t see this trend dissipating anytime soon, and until there’s a better solution for dense responsive navigation I don’t expect to see any major sites shifting to another trend.
This post should get you moving with everything you need to know about hamburger menus on the web. But if you’re looking for more responsive design tips & techniques be sure to check out some of our related posts: