The hamburger menu is everywhere. Here's why (and its pros and cons)

Profile picture of Lillian Xiao

{date}

{#hash1}

{#hash2}

Illustrations by {name}

A deliciously detailed guide to the hamburger menu icon: what it is, its pros and cons, and 8 alternatives.

7 min read

A large hamburger menu icon on a purple gradient background.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →


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. And 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. But it’s also been used in ways that obscure functionality or bring about confusion, leading to sub-optimal user experiences. Even so, the hamburger menu is incredibly useful for both designers and end users, depending on the context and details of the design.


This article dives into the history and rise in popularity of the hamburger menu, it’s pros and cons, and 8 alternatives to consider when deciding whether to use a hamburger menu for your own website design.



What is a hamburger menu?


An illustration of a hamburger menu.
A hamburger menu icon is a feature common to UI that uses three lines, like a burger between two buns, to depict a menu of items.

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. Nevertheless, with careful consideration of its benefits and drawbacks, and the existing alternatives, the hamburger menu can turn out to be a great design choice.


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


An illustration depicting a hamburger menu icon in the center with a thumbs up on one side and a thumbs down over a dark background on the other.
Hamburger menus are everywhere, but the icon also has some downsides. Weigh them both before adding the feature to your site.


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.



<