Should You Avoid Hamburger Menus on Desktop Websites?

In  Design

The navigation bar is mandatory when your website has more than one page. This essential part is what most websites have in common. When it comes to designing menu options, you can go for a hamburger menu, a horizontal navigation menu, an expandable navigation menu, a mega menu, a hover-activated dropdown menu, and others. However, one of these UI design implementations has found itself in quite a bit of controversy. We are talking about the hamburger menu design and its implementation for desktop websites. TechCrunch has called the hamburger menu “the devil”.

This article will dig deeper into the benefits and disadvantages of implementing this option and if you should avoid it, especially for your desktop website. 

What Is the Hamburger Menu?

When browsing through websites such as Youtube, you might have noticed a triple bar icon, usually located on the top left or top right of a web page. This is a hamburger navigation icon, and it is used to store all the navigation options. You can also call it a side menu or a navigation drawer, as it hides all your navigation features and will only open when you click on it. The hamburger menu icon has got its name because the design resembles a stacked burger. 

Hamburger buttons are widely used on mobile websites, applications and websites with responsive design. This is a popular option because the space on a mobile screen is limited. However, you will also find the hamburger menu icon on desktop websites. 

Should You Use a Hamburger Menu on Your Website?

Often, when users first get to your website, they are looking for your menu, as it is the easiest way to discover what the website offers and how to find their way to the products/services/pages they care about. Their first interaction with your online business is crucial in determining if they will convert into customers or if they will leave and never come back. This is the main reason you should pay attention to your navigation elements and what navigation styles you will implement.

Let’s see when hiding your primary navigation on the desktop might have some advantages without compromising the user experience. 

  • Your website includes non-essential (secondary) pages that do not attract as much traffic as the main pages, such as services, about us, blog, contact us, etc. Having these navigation items hidden will make your web pages cleaner, and by putting them into a side menu, your website will seem more organised and sleek. 
  • When your website requires profile settings or lists, grouping them inside hamburger icons feels more intuitive and logical. All profile settings, wishlists, favourites, likes, saved items, or lists won’t disturb the user’s journey on their navigation patterns.
  • When you have an eCommerce website, the second level of interaction with the user’s profile, wishlist, cart, searches and favourites can be kept in a hamburger menu to avoid cluttering the web page. 
  • When you have pages with a single and clear call to action (CTA).   

The three inline icons are highly recognisable because of their wide usage on apps, computer software and video games. Users know what purpose it serves. Moreover, the burger menu gives your website a clean feel as it doesn’t overwhelm users with too many options. Last, the burger menu is a great secondary access navigation tool, where you can put all the options of less importance. 

The Issues with a Hamburger Menu on a Desktop Website

For desktop user interfaces, a hidden menu such as a hamburger icon has less usability than a visible menu such as navigation links at the top of the pages.  

1. Discoverability 

When discussing desktop designs with plenty of screen space, we assure you that top-level navigation links are way better than a navigation drawer. When users don’t see it, it doesn’t exist for them. Because all features and content are hidden in the sidebar menu, users will be less likely to use the navigation. For website visitors to discover the available options, they must tap the menu icon first, and it takes more time to find what they are looking for. In the Nielsen Norman Group study, 39% of desktop users were slower to complete tasks and found the task difficult when navigation items were hidden in a side menu. Therefore, not showing users all their options will put you at the risk of having a part of your site undiscovered. More than that, with drawer navigation, there is a drop in discoverability of more than 20% than on sites with top-level navigation options or combo navigation.  

2. Item’s Importance

Hiding items in a hamburger menu will automatically decrease their value. When you consider something important, you try to get it as much as possible in front of people, but by putting them on a smaller stage, you consider them not as essential as others. Even when visitors are familiar with the burger navigation type, it still requires them to open the menu items and only after that they can see and reach their goals. This common pattern still causes friction and can affect the user journey.       

3. Engagement 

According to the same study mentioned before by Nielsen Norman Group, they learned that desktop users used hidden navigation only in 27% of the cases. In contrast, the visible menus were used twice as much. However, on mobile devices, the hidden navigation condition performed better, but it has still not exceeded websites that used combination navigation (visible navigation options and hidden navigation). This can be translated into lower engagement rates on your website because of the extra step of finding and clicking hidden links. 

4. Tiered Menu

When your website has a specific need for a category menu and a subcategory organisation, it is a pain to include everything into a hidden menu while keeping it easily accessible and visible. A desktop menu listed across the top of the screen, in a horizontal navigation bar, adding subcategories in the dropdown menu feels natural, and the website architecture is logical. However, you can add subcategories to each main category in your menu list, but you risk the visual simplicity, and the structure of it does not feel natural.      

5. Extra Step

Some may think an extra click does not seem like much of a deal. In terms of how we, as users, use the internet and expect everything to take as fewer clicks and steps as possible, adding a small extra step into the navigation process can lose users’ interest because they are not willing to put in the effort. A website that is easy to use and does not require unnecessary clicks is paramount to your user interface design.       

Our Opinion on Hamburger Navigation

We consider hidden navigation less effective than a horizontal menu, for example, on the desktop version of a website. We think that hidden navigation has low visibility and is hard to notice on a desktop’s large screen size. More than that, on larger screens, a burger menu is pointless. Users want to see what your website offers and complete their goals as fast as possible. Even if mobile design prefers using a hamburger menu, they are not so popular on the desktop, and it is not a common pattern for users.        

We recommend displaying a top-level navigation option or a combination navigation option for the desktop version, where there is plenty of screen real estate. The usability and user-friendliness of a website are crucial to avoid a terrible user experience. Providing in-page links is essential for your important information, and they support your strategy. Even if you go for a custom development solution for your website or an off-the-shelf solution, pay attention to your navigation, as it is a core feature of any website on the internet. If you need help with your online business, contact us today. You can also read our blog to find more helpful articles.  

Frequently Asked Questions

What is the purpose of a hamburger menu?

The purpose of a hamburger menu is to hide a list of features—your website menu navigation.

Who created the hamburger menu?

Interaction designer Norm Cox.

Is the hamburger menu the best solution for primary navigation on desktop websites?

No. We recommend combo navigation if you must include a burger menu in your interface.

Was the hamburger menu designed for mobile sites?

No. The hamburger menu was first introduced for desktop websites and placed in the top-left corner. However, nowadays, it is mainly used as a mobile menu.