Illustration by Avirup Basu
When browsing websites, you’ve likely noticed the triple bar icon located at the top left or right corner of a web page. This icon is known as the hamburger icon, and it’s used to store navigation options. Despite its relative simplicity (it only takes a few minutes to create a hamburger menu in prototyping tools) this is one of the most controversial elements of design. Some designers love using it, others dislike it.
In this article, we will review the hamburger menu concept, its pros and cons, and share an excellent collection of websites that utilize the hamburger menu.
What is a hamburger menu?
A hamburger menu is an icon used on a website and in apps that, when clicked or tapped, opens a side menu or navigation drawer. It’s called a “hamburger menu” because it takes the form of the famous sandwich. This icon was created by the designer Norm Cox for the graphical user interface of the Xerox Star workstation in 1981. Cox’s goal was to create an icon that would communicate to users that a list of items was hidden behind it.
Norm Cox discusses the concept of the hamburger menu in his 2014 interview. Video credit Vimeo.After the Xerox Star, the hamburger menu became an unpopular navigation pattern and remained that way for almost three decades. But the situation changed in 2009 when smartphones started to gain traction. Screen space was a precious commodity on mobile, and designers needed to fit a multitude of information on pocketable screens. The hamburger menu seemed like a good solution for this problem, and the icon started to appear in many popular mobile apps such as Facebook.
Shortly after, it started spreading on the Internet and many websites and mobile apps adopted this pattern. Today, many popular user interface (UI) kits that serve as a reference for product creators are designed with a hamburger menu.
Facebook was one of the first companies that introduced a hamburger menu in their mobile app. Image credit TheNextWebHamburger menu design pros and cons
When it comes to user experience (UX), the hamburger menu is a very controversial concept—as it has its own unique benefits and downsides. It’s important to consider both before making a decision to use this pattern. Let’s start with hamburger menu benefits:
- It streamlines screen layouts. Clutter is the worst enemy of good usability. Designers know that user attention is a precious resource and it’s important to avoid distraction. The hamburger menu is a space-saving mechanism since all navigation options become visible only after a click or tap. By shifting the navigation option from the screen, you focus the user’s attention on the content.
- It’s well-recognized. The human brain decodes visuals faster than words, and the great thing about the triple-bar icon is that it’s one of the universally understood icons. Even though many users may not know it is called a “hamburger menu,” they can easily understand what it does.
Now let’s talk about hamburger menu downsides:
- It’s less discoverable. As an old proverb says, ‘“What’s out of sight is out of mind.” Hamburger menus hide navigation options, and in order to see them, users have to click or tap the icon first. But when users don’t see their navigation options in the first place, they’re far less likely to engage with them.
- It’s not scannable. In its default state, the navigation options in the hamburger menu remain hidden. This makes it difficult for users to understand what navigation tools are available when they first land on a page.
- It takes extra user effort. It takes at least two clicks or taps for the user to navigate to another page. Users have to click on the hamburger icon first to see options, then they need to find the option they are looking for and click on it.
Should a hamburger menu icon be located on the left or right side of a screen?
While there is no single right or wrong answer, it’s important to share some general recommendations for designers considering hamburger menus. If you’re working on a website design, it’s recommended to place hamburger icons in the top left corner of a page. In the western world, users start to scan a page from left to right, and the hamburger menu will be the first thing they notice.
If you’re designing an Android app, you should follow Material Design guidelines. For left-to-right languages, hamburger menus should be placed at the top left corner of the screen. This means that the navigation drawer or side menu will also open from the left side of the screen.
What is the ideal design for a mobile hamburger menu?
The hamburger menu is a popular navigation pattern on many mobile apps and websites. Since mobile screens have relatively small real estate, it’s beneficial to use this pattern to leave more space for content. At the same time, hamburger icons can be hard for users to reach on mobile. As mobile screens are getting larger, it is becoming harder for users to reach a hamburger icon located in the top corner of the screen.
If you decide to go with a hamburger menu for your mobile website or app, these simple rules will help you create the ideal mobile hamburger menu design:
- Prioritize destinations and navigation hierarchy. Use the hamburger menu when your product has more than five top-level destinations or two or more levels of navigation hierarchy. If you have five or fewer equally important navigation options, it’s preferable to use visible navigation (e.g., a tab bar).
- Put navigation options in one column. Order destinations according to user importance, meaning more critical options should go towards the top, while less critical options should go towards the bottom. By displaying these navigation options in a vertical list, you make it easier for users to scan them.
- Never mix navigation patterns for primary navigation. You shouldn’t mix the hamburger menu with other navigation patterns, such as tab bars, because it will confuse your users. There should be only one primary navigation pattern per app or website.
- Try to use a hamburger menu for secondary options. Hamburger menus are great for storing secondary navigation options, or options that don’t directly serve your main navigation goals.
Uber uses a hamburger menu for secondary navigation options. Image credit Uber.What are some good examples of hamburger menu websites?
Now that you know what this well-known navigation pattern is, it’s time to share some popular websites with hamburger menus:
1. Google Maps
Google Maps is a content-first website. It offers the user exactly what they expect from it. The screen’s primary area is dedicated to a map with a few essential user interface (UI) controls, including zoom-in and zoom-out tools. All secondary navigation buttons are hidden away in the hamburger menu.
Google Maps uses hamburger menus for less important things, such as different types of views and contextual operations (e.g., print, share, etc). Image credit Google.2. Adidas
The Adidas website design places the hamburger menu in the upper-left corner of the page. Adidas follows suit with the Priority+ pattern, as the hamburger menu only becomes visible when the user’s viewport becomes relatively small.
Adidas uses hamburger menus for primary navigation options, but this icon becomes visible only on small viewports. Image credit Adidas.3. Awwwards
Awwwards is a collection of creative and innovative websites. The design of this website follows a minimalist approach. In an attempt to focus the user’s attention on the content, they remove all extra noise. Not surprisingly, they decided to use a hamburger menu to achieve this goal. One great thing about Awwwards is that they supplement the menu icon with a “Menu” label. By doing so, they minimize the chance that users won’t be able to spot the hamburger menu icon.
Awwwards practices minimalism and uses hamburger menus for primary navigation options. Image credit Awwwards.4. Bootstrap
Bootstrap is the world’s most popular front-end open-source toolkit. It allows web designers to create responsive layouts quickly. Breakpoints are the building blocks of responsive design. Designers use them to control how their layouts can be adapted for particular viewports. Bootstrap uses the hamburger menu for small breakpoints (i.e., less than 576px).
Bootstrap uses hamburger menus for small breakpoints. Image credit Bootstrap.5. Evernote
Evernote is a product designed for note-taking and organizing various information. Evernote’s website homepage design features a hamburger menu at the top right corner of the page. Notice how much whitespace every content block has, including between Evernote’s name and icon, the page’s headline, and the call-to-action button.
Evernote relies on the hamburger icon to make the UI less busy. Image credit Evernote.Discover if the hamburger menu is right for your website or app
When you’re thinking about whether or not the hamburger menu is right for your website, it’s important to consider how it will work for your users. Will the hamburger menu make navigation easier? When in doubt, you can always test your design with real users. Run A/B testing with two design examples, including one with a hamburger menu and one with visible navigation like a top-level navigation bar. Measure task completion time and see what options work best for your users.