What is the hamburger menu?
The hamburger menu goes by many names. The navigation drawer, the side menu, the slide menu – All names for the menu which usually is found at the top left or right of the screen. The icon takes the form of 2 or 3 horizontal bars in parallel. Selecting the icon usually results in navigation pushing,pulling, sliding, or overlay the screen.
This style menu and icon have been heavily used since 2008, with the massive uptake in smartphones and the mobile web. Facebook is often credited with popularising the design pattern in their early mobile app.
The hamburger menu, at first glance, appears to ‘simplify’ your menu, especially on smaller screens and mobile devices, and solve your screen real-estate challenges.
However, hiding core parts of your website or application behind these hamburger menus could negatively effect your organisation.
Why avoid it?
There are many reason to avoid the hamburger menu. The reasons to avoid it are summed up into the following core issues.
Understanding
Although popular and near ubiquitous, still a significant number of of users still don’t understand the icon.
Discovery
The phrase “Out of sight, out of mind” is a common theme in usability.
Friction
You want to make it easy for your users, to make content just a few click away – the hamburger menu forces people to open the menu before they can achieve their objective
What do I use instead?
Horizontal Scrolling Navigation
A super simple full width navigation which lets the user scroll horizontally on mobile.
Bottom Tabs Navigation
This is the approach many are adopting, tabs fixed to the bottom of the screen. This is a popular and recommended pattern of both Android and iOS app development.
This is particularly good with modern phones being larger and it is hard for people to reach the top of the phone to navigate – this navigation style keeps all links in thumbs reach.
About Fraser Clark
I've been a professional developer for over 10 years. I've been consulting and developing websites & software for small businesses, multi-nationals & governments.
I'm an expert in WordPress, Drupal, Laravel & a whole host of other platforms.