Hamburger menus in website design

September 27. 2021

Anyone using the internet has probably seen dozens of examples of Hamburger menus on the internet. This simple, triple-line, icon is among the most recognizable buttons today. Many websites are using it to hide often robust navigation elements and save space. However, despite their usefulness, Hamburger menus in website design are still among the most arguable web design options. For some, it’s a genuine solution that should find its way entirely into all responsive designs. For others, it’s an unfortunate side effect that comes from a misinterpretation of practical structural design.

An introduction to Hamburger menus in website design

Not exclusively, but hamburger menus are usually found on responsive websites and apps when they adjust to small screen displays. Whether they are on the left or the right side, professional designers and developers use hamburger manus to save valuable space. This is a popular solution because they hide main navigation to leave more room for the rest of the content. But, not everyone thinks it’s an appropriate solution. Many claim quite the opposite.

To help you understand the hamburger menu better, here, we’ll discuss:

• What Hamburger menus are
• The concept of Hamburger menus in website design
• The controversy behind it
• Alternative implementation
• General Pros and Cons of Hamburger menus in website design

What are Hamburger menus?

Simply put, a hamburger menu is a simple and smaller alternative to large navigation bars. It basically serves as a drawer where you can place everything from the navigation that clutters your website. Hamburger menus most typically look like three lines on top of each other. The name comes from its obvious resemblance to hamburgers.

Everything started back in 1981. at Xerox Star workstation. Norm Cox, the graphical user interface designer of the time, made an icon to open a list of hidden elements. The intent was to give an alternative space-saving solution for the long lists of options. Something similar to the right-click conceptual menu on desktop computers. But, up until 2009, the hamburger menu didn’t experience much glory. Only when Facebook and a few other websites introduced it again, hamburger menu started its journey. It was an almost perfect solution to save precious screen space on the then-emerging mobile devices.

But, was it?

The everlasting argument about the hamburger menu

The original creator’s intent was to create something simple yet effective. A small button that will reduce the clutter by following the same principle behind the right-click menu. It was supposed to be similar, memorable, and easy to use. And it is, even in its present form for which it was not originally intended.

However, not everyone shares the same enthusiasm when it comes to hamburger menus. Many designers criticize it because it hides the most important part of website navigation. Consequently, visitors will have a hard time finding it. They recommend using the Hamburger menu only when there are more than four navigation elements in the menu. On the other side, these claims might change in the future since most people are already getting used to the way hamburger menus look and function.

Alternative usage and implementation

Besides the “four elements” rule, there are other suggestions about how to improve hamburger menu usability.

• Combine the hamburger menu with other features. For example, you can place the search function and hamburger menu right next to each other.
• Use placeholders of different shapes, borders, and colors to make “hamburger” more distinguishable.
• Find alternative positioning which is not necessarily one of the corners.
• Create a floating hamburger menu with a fixed position once visitors start scrolling the page.

The idea is to provide a clean but distinguishable design convenient for mobile users regardless of the size of their device’s screen.

General Pros and cons of the Hamburger menus in website design

From the aspect of UX (user experience), the hamburger menus can be a two-edged sword. While it can work in most situations, in others it can create confusion. To understand when to use it, it’s better to check all the Pros and Cons of the Hamburger menus.

Pros:

• The hamburger menu reduces the clutter – it works when it matters the most. Proper use of space can sometimes mean everything for mobile websites and apps. Considering the size of the screen at your disposal, anything that can give you more space is good. Also, too many elements on the screen can only distract visitors from paying attention to the right content.
• Keeps navigation understandable – Almost everyone today understands what it’s used for when they see the hamburger menu. We are visual beings and noticing an icon that looks like three horizontal lines in a column is easy. Especially if it reminds us of one of the most favorite fast meals. Just think about how many different icons and brand logos you know by the name.
• Can be a great option to keep the secondary navigation element out of the way – There is no rule that says you need to place your entire navigation in the hamburger menu. Quite often, one of the best solutions is to leave main nav elements on the website and place all the other secondary options in the hamburger menu. This basically takes the best from both worlds and still serves its purpose.

Cons:

• Important navigation is not visible – When you transform your navigation to a hamburger menu, you are making it almost invisible. A few pieces of research confirm that website engagement can considerably drop due to this reason. In other words, some people will not click further because it’s not catching their attention immediately.
• Not everyone understands it – less likely, but there are still visitors that encounter the hamburger menus for the first time. It may look familiar, but not enough motivating, or self-explanatory, to make them do the action. They will leave it as it is because there are no other indications about what it’s used for. This is changing, but it can sometimes be non-intuitive. Especially when designers use too much freedom and make it completely abstract. Or the “hamburger” itself is not visually distinguishing enough.
• The hamburger menu requires additional “effort” to use –  While it may sound silly, but, technically, a hamburger menu does take a few steps more than typical navigation. Not to mention the fact that not everyone can reach it with their thumbs when holding their phones in one hand.

Whatever your subjective opinion is, never forget to consider what is the best option for your users. You may like hamburger menus but, still, end up not using them if the circumstances don’t look right. Or, you can hate it completely, but it might be the best solution for your website or app. Remember that the right application of hamburger manus in website design might be situational and different from case to case. To see if it’s for you, run a few A/B tests and see what your audience thinks about it.