Should I have a hamburger menu on my website?

Hamburger or burger navigation menus are a common sight on the web. While they're an effective and necessary approach on mobile, they can harm user experience and conversion rate on a desktop.

Navigation is an essential component of every B2B website design. It's the primary way visitors discover and travel to content beyond the page they land on.

Navigation should only use a limited amount of space on screen, but its structure and design present some of the bigger questions for website project teams.

What are the challenges of navigation design?

• How many items required
• Link prioritisation
• Hover vs. click interactions
• Cursor and finger paths
• Branding
• User behaviour
• And more

The ideal solution to these issues will vary from site to site, and are always different between mobile and desktop screen sizes.

However, due to their clean, compact form and the range of animation opportunities they present, burger menus, the ideal choice for mobile, found their way onto many a desktop site too.

Why hamburger navigation works on mobile

Mobile devices have portrait aspect ratios and limited screen width. This means that traditional, horizontal navigation – born in an era when the web was predominantly accessed via desktop computers - simply doesn’t fit.

For websites on mobile, a different approach is required. The hamburger menu, a small, space-saving icon that visually represents the list-format menu and shows when clicked, has proven versatile and effective.

The hamburger menu button comfortably sits alongside the company logo in the header section of the mobile website. It's well-recognised and familiar to users, and it's relatively touch-friendly, having a square form factor that can be appropriately sized for finger operation.

3 reasons to avoid hamburger navigation on desktop

Desktop monitors and laptops offer ample space to display navigation menus horizontally. And while it can be tempting to borrow from mobile, and minimal, design trends for your desktop site, the negative impacts outweigh the positive.

1. They hide important content

First and most fundamentally, hamburger menus hide critically important content that could be visible to a visitor at a glance. They force users to click twice, usually on every page, to discover what content is available and to navigate to it. This add clicks, time, and frustration to every interaction.

2. They reduce SEO value

A hamburger menu may well negatively impact both your search engine optimisation and accessibility of your website too, unless significant effort is invested in overcoming the problems associated with hiding menu content from the visitor until clicked.

3. They create a poor user experience

The result is reduced visitors satisfaction with your website user experience, which in turn reduces the number of visitors persevere with your website, find the content they need in order to purchase, and go on to perform a high-intent conversion.

Read Nielsen Norman Group's research on the negative effects of hamburger menus 

Desktop website navigation best practices

To ensure your visitors have a positive, frustration-free experience on your website, keep in mind these desktop navigation best practices:

• Horizontal navigation: Use the space available to present your navigation in traditional, horizontal form. Avoid hamburger menus and, as a general rule, other atypical approaches such as vertical navigation
• Limit what's presented: A plethora of links or a huge mega menu does nothing to improve the user experience or impression you make. Make choices on behalf of your visitor and present the options that are most important to their journey, not all of them
• Focus on forward movement: Prioritise navigation links that move visitors further forward on their journey, ways into your site over ways out – blogs and resources should drive traffic into your site so they are candidates for leaving out of your main nav if space is limited.
• Lean into primacy and recency: Put the pages that are most important to the buyer's journey towards the start (left) of the navigation and the actions you want them to take toward the end (right).
• Make calls to action stand out: Your key CTAs should stand out from the rest of the navigation, and if you have more than one they should be visually differentiated from each other with the primary one being clear.

Put users, and their experience, first

If you want to put your website users (your potential customers) first, and not personal design preferences or the desire to be different, always use traditional, horizontal navigation on your desktop website. This will help you avoid a negative impact UX, and increase conversion rate, and revenue.