When To Use a Hamburger Menu Icon

The rise of mobile has shifted the web to be mobile-friendly, transforming how we understand icons on websites.

You probably know by now that the hamburger button is a symbol that consists of three parallel horizontal lines (displayed as ) used as a button in graphical user interfaces. The icon indicates that when clicked, a further information might be displayed. It is called a "hamburger button" for its apparent resemblance to a hamburger.

Many websites have taken a mobile-first approach when going through a redesign or adaptation, ensuring that their mobile visitors can enjoy an adequate browsing experience from the device they choose to.

Increasingly, these hamburger icons are being used in desktop versions of websites, which essentially defeats their purpose: saving space on small devices!

When Norm Cox, the credited designer of the icon, prepared its design, we'd like to imagine the purpose the icon served was to ensure that small user interfaces could benefit from a visual element that would drive an action such as clicking it to see more information.

A website menu serves two purposes. On one hand, it allows the user to glance at what content might be available. It provides context. On the other hand the menu allows the user to go from one section to the site to another without having to go through a massive effort.

An effective menu should be that which at a glance, informs the user about what might be available on the website their visiting and does not require an effort to interact with. With hamburger menus on desktop-versions of websites, 'glanceability' is lost and the user has to go through the effort of doing an extra click to get to the content that he might be looking for.

A/B tests have shown poor conversion on websites that display a mobile menu by default on desktop-versions. Why? As said, lack of glanceability and extra effort.

From a UX perspective, it might look smart and trendy, but let's not forget the purpose these icons have: to save space on small displays such as mobiles.

James Archer wrote an awesome post sharing his opinion on why the hamburger menu doesn't work. The UX community seems to have mixed feelings about this iconic item: some love them, some hate them.

This is a great showcase of hamburger icon designs that you can use for inspiration.

At the end of the day what matters is ensuring that your website visitors can intuitively navigate through it, without having to spend time re-learning. Navigating through a website should be like driving after few years: you don't think about it, it just happens. This way your visitors can focus on digesting the content you've carefully crafted for them and enjoy the digital experience you've designed.