When browsing websites, you would have 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 is used to store navigation options.

Despite its relative simplicity the hamburger icon is one of the most controversial elements of UI/UX design. Some designers love using it, others absolutely dislike it.

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 is called a 'hamburger menu' because it takes the form of the eponymous 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.

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 mobiles, and designers needed to fit a multitude of information on pocket sized 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.

Hamburger 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 any decision on when to implement this navigation icon.

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 intended content.

It is well-recognised. The human brain decodes visuals faster than words, and the great thing about the triple-bar icon is that it is universally understood. Even though many users may not know it is called a 'hamburger menu' they can easily understand what its function is.

Hamburger menu downsides

It is 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 are far less likely to engage with them.

It is 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 is important to share some general recommendations for designers considering hamburger menus. If you are working on a website design, it is sometimes 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 take into consideration finger reach on a mobile device, the right hand side might seem like a more attraticve placement due to the users ability to reach that area of the screen withour too much manoeuvring.

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 smaller screens when comapred to tablets or laptops, it’s beneficial to use this pattern to leave more space for other desired content. At the same time, hamburger icons can be hard for users to reach on larger sized mobiles. 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 website or app, these simple rules will help you create the ideal hamburger menu design.

Prioritise destinations and navigation hierarchy. As a general rule of thumnb use the hamburger menu when your site 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 often preferable to use visible navigation (eg 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.

Choose a style of hamburger that reflects the aesthetic of your app or website and whilst streamlining the navigation process also maintains harmony of graphical elements.