What’s a Hamburger Button? It’s the Hamburger that’s good for you.

There’s a hamburger you should try. It’s becoming really popular, people who try it seem to like it, it doesn’t make you (or your app) feel bloated…

Ok, enough of the poor wordplay, of course I’m talking about a Hamburger Button – that little three line icon you would have seen on apps that hides the primary navigation system until you tap on it.

Why talk about it? We build a lot of mobile sites and apps here at Fly Digital and have started seeing a real trend in clients moving away from tab bar navigation to the Hamburger way of navigating. It’s becoming a more widely accepted way to manage navigation on smaller screens.

Is it going to replace the tab bar? I think it will. The traditional tab bar that runs across the footer of many apps takes up a fair percentage of the screen real estate and usually only allows for 5 options at any one time. The Hamburger method takes up a tiny amount of screen space and can reveal a menu system that theoretically can be endless. These two reasons alone are going to move more app developers across to this method.

How does it work? In most cases, tapping the Hamburger icon slides the main content across to the right revealing a vertically scrolling view of menu items. Some apps also replicate this behaviour by allowing you to swipe across the main content.

The screenshots above show how the Facebook app on iOS does this. Below is a closeup of the Hamburger icon and expanded menu from the Teambox app also on iOS:

Why ‘Hamburger’? Well the icon itself has been around for a while but was originally designed to represent a set of drawers that when opened reveal additional content. However as it’s been used more widely in the mobile world (and probably in a bar somewhere on a Friday during lunch) developers have recently decided that the three layers looked more like a stylised burger instead, hence the name.