The burger menu has become a ubiquitous navigation solution on mobile devices. The burger menu (also referred to as a sidebar menu or junk-drawer menu) is a conceit for smaller viewports where there simply is not enough screen real estate to display all of the links/options in a website/app on screen by default.

Whether this solution is right or not on mobile devices, it is evident that the reason for its existence is at least somewhat justified.

 

However, the same reasoning cannot be applied to desktop websites. Desktop websites are rarely space-constrained (there are exceptions) in the same way that sites on mobile devices are.

 

In a desktop website context, the burger menu replaces the traditional ‘horizontal list of links’ design pattern with an icon that, when clicked, reveals a panel housing a list of links, typically arranged vertically and anchored to the side of the viewport.

 

Whether intentional or not, moving the menu items into a burger menu and hiding them by default sends a clear message – they are of lesser importance.

Why are desktop burger menus becoming so common?

When a web designer suggests that a burger menu should be utilised on a desktop website, the typical reasons for the suggestion are:

 

  • There’s not enough space to display the full menu in the header area
  • Replacing the menu with an icon will look nicer

Argument #1: There’s not enough space to display the full menu in the header area

This might be a sign that the navigation or site hierarchy needs to be simplified.

 

Take stripe.com for example. The site has dozens of pages yet they have kept their navigation clear and importantly, visible.

(embed gif) http://g.recordit.co/HDJrfoABtP.gif

If the navigation is diverse by nature, then another possibility is to prioritise the items, displaying the critical links by default, and progressively collapsing items of lesser importance into a ‘more’ menu.

https://kyusuf.com/assets/images/content/hamburger-alternatives/okayNav.gif

(embed gif) An example demonstrating progressive collapsing via the okayNav plugin

Argument #2: Replacing the menu with an icon will look nicer

A web designer’s first priority should be to make a design ‘work’. An effective designer aims to make things ‘work’ whilst also looking good.

 

If being ‘aesthetically pleasing’ is your primary objective, then this is the valid reason for sacrificing functionality in favour of beauty. However, even if this is the case, you should also ask yourself whether looking nicer is really more important than functioning better.

 

See: Form follows function.

When is the burger menu an appropriate solution on desktop sites?

Every website is unique and has different objectives. In cases where it is desirable to guide a user’s focus towards (and exaggerate the effect of) a full-screen hero image it might make sense to utilise a burger menu in order to de-clutter the header area, but this decision should be a conscious one.

What are the alternatives?

  • Simplify your nav. Create an optimised set of top-level links, and use flyout menus to reveal nested items
  • okayNav. Progressively collapse navigation items into a ‘more’ menu
  • Reposition your nav. If your nav is next to a logo, perhaps move it below the logo to reclaim some horizontal space