What is the Hamburger Button and Should You Use It?

What is the hamburger button?

The “hamburger” button is a series of three horizontal lines used by websites and apps to denote a menu, especially on small screens like tablets and mobile phones. This is because of the limited space on these devices and rather than spend expensive screen real estate on showing menu options all the time.

Although the use of the hamburger button has soared since the advent of mobile and tablet devices ten years ago, we must go back 40 years when it was first used in the Xerox Star 8010, the first commercially available personal computer.

First occurance of the hamburger icon with the Xerox Star 8010
Hamburger button first featured on the Xerox Star computer, released in 1981

Its designer Norm Cox described it as, “Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple.”

Microsoft also used in the icon in its Windows 1.0 operating system that was released in 1985, but this was short-lived and replaced in its successor Windows 2.0 in 1987. Microsoft would not re-introduce it for a further 29 years until 2016 in its one-year anniversary update of Windows 10.

The Revival of the Hamburger Button

Much like Xerox Star interface designer Norm Cox in the 1980s, app designers faced similar problems in the late 2000s and early 2010s with the runaway success of mobile phones, namely Apple’s iPhone. The four-inch screen size placed constraints on the size, so like the Xerox Star, it needed an icon that was clearly visible at a small size.

There is still some debate who revived the universal icon, but it seems the earliest occurrence was in 2009 on the Apple iPhone 3G with its built-in app Voice Memos and Loren Brichter’s Tweetie for iPad, the first Twitter application.

Comparing the grid icon in 2010 and hamburger icon in 2021 with the Facebook app
Comparison between the Facebook app in 2010 and 2021

That, however, doesn’t really explain its exponential use. This can be best explained with Facebook. The social networking giant used a grid as the menu icon in 2008 and two years later replaced it with the hamburger icon. The runaway success of Facebook perhaps explains why so many websites, mobile apps and even desktop applications feature it.

Today, it continues to be part and parcel of web design. With countless frameworks and other design systems still using the hamburger button.

XHost website using the hamburger icon
The XHost website is one of countless websites that use the hamburger icon

Should You Use It?

Despite it being used by so many frameworks and apps, not all designers share the view. Some claim that it is too simple and for those not used to interacting with the icon, it isn’t clear to those who haven’t used one before.

App designers have started to come away from the hamburger icon. Some websites have started too but any site with more than a few options quickly struggles for space, while not being so easy to implement into frameworks, which are designed as universal solutions. Navigational bars are however, gaining traction among app and few web designers too. They can serve as a great alternative as it brings options to the end-user’s attention, offering to answer a question for the user, while potentially increasing engagement and sales.

Google Maps using navigation bar rather than a hamburger icon
Google has started favouring descriptive navigation bars over the hamburger icon

Need Design Help?

The XHost design team have a wealth of experience in designing, building, and maintaining websites and web applications along with many other services. Find out more information on our website development service page or use our contact form and we’ll call you back.