The hamburger menu is a popular design feature that can be found all across the web—from websites and apps to software programs and video games. It’s a simple three-line icon that houses navigation options. It’s widely used to simplify interfaces for compact screens and information-heavy sites.
Since its appearance on the scene decades ago, the hamburger menu has found itself in a love-hate relationship with the design world. It’s become the go-to solution for simplifying navigation and freeing up space on small screens. That makes sense: the hamburger menu is incredibly useful for both designers and end users, depending on the context and details of the design. But it’s also been used in ways that obscure functionality or bring about confusion, leading to sub-optimal user experiences—which is where hamburger menu alternatives come in handy.
This article dives into the history and rise in popularity of the hamburger menu, it’s pros and cons, and 8 hamburger menu alternatives to consider when deciding whether to use a hamburger menu for your own website design.
What is a hamburger menu?
A hamburger menu is a minimal button that reveals a hidden menu, typically represented with a three-line icon (hence the colloquial name "hamburger menu"). It’s commonly found on the top left- or right-hand corner of a screen, toggling between showing the available menu options or collapsing them behind the simple icon. But it wasn't always intended that way.
Invented in 1981 by designer Norm Cox for the Xerox Star, the first commercial personal computer with a graphical interface, the hamburger menu served a different purpose than what it’s known for today.
"The original intent of the hamburger icon [or] symbol was a sort of overflow container for menu buttons that didn't fit in the header of the window," Cox tells Shaping Design. Cox adds that the icon was "created more as a necessity rather than a desirable UI widget," though it has evolved into a web design feature of choice today. (According to Cox, the icon wasn't originally called a "hamburger," either.)
Following its creation, the hamburger menu, as we'll call it, stayed relatively quiet until around 2009, when mobile phones were gaining traction. Designers needed a simple way to fit lots of information into pocket-sized screens. And that’s when the hamburger menu started appearing all across the web.
When deciding whether to use a hamburger menu, there are a couple of best practices to keep in mind.
It’s important to consider how your site will benefit from having a hamburger menu (compared to its alternatives), and whether users can successfully navigate your site with the hamburger menu design. Hamburger menus are great for keeping secondary features and web pages tucked away, which can help simplify your site’s interface and bring focus to the most important features and information. Plus it’s a well-recognized icon. But it’s important to consider the added step that it takes for people to find and access it, so making this process as easy as possible is key to designing an effective hamburger menu.
Today, the hamburger menu is universally recognized, but it’s still not universally accepted by those in the design world.
So to better understand when to use a hamburger menu, and whether it’s the right choice for your own site, we’ll first explore the pros and cons of using a hamburger menu in the next section.
Pros and cons of hamburger menus
Pros:
It’s identifiable at a glance: One of the main advantages of using the three-lined icon is that it’s universally recognizable, in the same vein as the house icon for home, the magnifying glass for search, or the gear icon for settings. The power of the icon is that it’s visually unique, even in all its variations, which means people around the world are quick to recognize it as the place where navigation options are stored.
It declutters the UI: The hamburger menu is a simple and clean design element that helps declutter interfaces which would otherwise be packed with too much information. Having too many options available at once can be distracting, while leading to higher cognitive load and decision-making fatigue. A hamburger menu neatly tucks away these menu items and non-core functions of a site when they’re not in use, which improves a site’s usability. For this reason, hamburger menus have increased in popularity with the rise of mobile phones because they work well with small screens.
Flexible use: While hamburger menus are most popularly known for housing top-level navigation options, they can be used flexibly in other areas of an interface. For example, hamburger menus can be used in conjunction with a primary navigation element, such as a tab bar, to store secondary features and functionality. When used in this way, the hamburger menu can be located on the tab bar, as a floating element, or in other creative ways. This design approach lets users quickly access secondary functions in a single click or tap, rather than having to search or go through a series of steps to find them.
Cons:
Less discoverable: One of the key disadvantages of hamburger menus is that they keep important web pages and site features hidden, making them less discoverable. In order to see the options available to them, site visitors have to click or tap the icon first. And it’s not uncommon for users to have a more difficult time finding the information they’re looking for. In a 2016 study by Nielsen Norman Group, users were 39% slower on desktop and 15% slower on mobile to complete tasks — plus they rated task completion more difficult — when navigation items were hidden. When site visitors have to actively search for these pages and features, there’s a risk they may not find them, which means those parts of a site can go undiscovered.
Added interaction cost: Since hamburger menus introduce an extra step, whether it’s a click, tap, or swipe, they increase the interaction cost. It takes users extra effort to find the options they’re looking for and navigate to where they want to go. Hamburger menus that are found on the upper right- or left-hand corner of a screen can also be difficult to reach on mobile, adding to the difficulty of interaction. This can mean that users are less likely to interact with an element when it’s slightly out of reach.
Lower usage rates: User studies have found that menu items hidden behind hamburger menus have lower usage and engagement rates compared to menu items that are visible. Not only that, these studies revealed that swapping a hamburger menu out for a more visible menu increased user satisfaction, number of sessions, session time, revenue, and perception of speed. [Related: Learn how to make the most of styled horizontal menus instead.]
Hamburger menu alternatives
When deciding whether to go with a hamburger menu, it’s important to consider other options. Let’s look at a few common alternatives.
1. Tab bar
The bottom tab bar is a popular alternative to the hamburger menu. The always-visible navigation bar keeps core features and functionality front and center, which means they stay top of mind for users. Design choices for the tab bar—such as indicating where you are on the site with color, or featuring icons that communicate features clearly—can help improve navigation and usability. Plus you can easily switch between pages or features with a simple click or tap. With this design, however, you sacrifice some screen real estate in place of always making sure navigation options are shown.
2. Tab bar with “more” option
If you have more than a handful of core pages or features (say more than four), you might want to consider adding a hamburger menu as the last option in your tab bar. In this case, the hamburger menu takes on a different role. Rather than having it contain the primary navigation, it supports the main navigation by housing secondary features.
These secondary features might not be critical for helping users achieve their main goals while on the site, but are still important enough that they may want direct access to them. The hamburger menu helps signal that there are more options available, and that visitors can easily explore them further when they’re looking for more functionality.
3. Top tabbed menu
A top tabbed menu, sometimes called a scrollable menu, is another solid hamburger menu alternative and lists core categories at the top of a screen. Often, part of the list is hidden and requires you to scroll to access it.
If you have a content-heavy site, like a news site or a music site for example, a scrollable menu lets you list out all the important categories that people search for, without having to keep them hidden behind a button. The prominent placement helps visitors access parts of your site directly. The downside is that, depending on your screen size, only a limited number of items can be shown at once. Users will have to scroll to discover categories that are hidden.
4. Swipe navigation
Swipe navigation lets you swipe through a site or app to access its different features. It can make things more fun and interactive, and create smoother interactions compared to clicking or tapping. This alternative can be less discoverable, and might require guidance or onboarding for users to be aware of the functionality. And without the proper cues (whether it’s visual, motion-based, or sound-based), it can be difficult to determine where you are on a site.
5. Progressively collapsing menu
In a progressively collapsing menu, the menu options simplify as the screen size gets smaller. The number of displayed categories changes. And the overflow options get stored behind a “more” button (or something similar).
6. Floating menu
A floating menu occupies a fixed position on the screen. Its unmoving position, plus other design elements, like color choice, iconography, or the use of shadows, can signify its importance in housing core features of a site. This menu design lets users easily access its menu items wherever they are on the site, without having to actively search or navigate to them.
7. Labeled hamburger menu
Another hamburger menu alternative to try is adding the word “menu” to the hamburger menu icon. Based on user studies, the Nielsen Norman Group recommends adding a label to make your navigation element easier to locate on a screen, especially for visitors who are not yet familiar with the hamburger menu icon. They also recommend using visual signifiers like color or location to help visitors find the icon. This suggests that even though hamburger menus are widely used, their functionality and location are not always obvious, and could be supplemented with other additional cues.
8. A combination of methods
Depending on your site architecture, you might consider combining the hamburger menu with any of these alternatives, or use a combination of the alternatives listed. Each option brings its unique advantages, and combined they can create a navigational experience that’s clean and usable, and fulfills the goals of your site.
So which menu is right for your site?
Is a hamburger menu right for your site? Or maybe you have more space to work with, and prefer option visibility? It will likely depend on your site and its users. So trust your judgment as a designer, and even better, test your design—and some hamburger menu alternatives—with real users.
