What is a ‘Hamburger Icon’?

We understand that the world wide web is a big, scary thing for most people, so each month we’ll try to take a word, acronym or phrase and explain to you in simple, ‘non-techie’ terms what it all means. This is DBG’s Digital Definition of the Month!

So what is a Hamburger Icon?

Sometimes also called a ‘navigation drawer’, this little icon isn’t a delicious treat that you can eat!  It’s actually used in digital design to indicate a hidden menu, aptly named due to its layered appearance:

 

hamburger-menu-icon

 

We’ve seen a steep increase in use of these little hamburger icons ever since the introduction of smartphones.  As soon as users could access the Internet on these handheld devices, designers have been rushing to keep up with designing for these smaller screens.  Given that real estate on a smartphone is very valuable, designers have had to get crafty about maximising the space on websites and apps alike.

Here we can see the hamburger icon being used in the Facebook Page Manager Application (for iPhone):

 

FB-hamburger-icon

 

When clicked, a full-page menu appears where the user can select from other pages that they are an Administrator on, and also access the Help Centre, App Settings, and so on.

And here we can see the hamburger icon being implemented in a responsive website design for Elite Ski Boats (designed by our team at DBG!):

 

Elite-Ski-Boats-hamburger-icon

When the website is viewed on a desktop, the full menu is shown.  However when the site is being viewed on a smaller screen, such as on an iPhone, the menu automatically shrinks down and hides here:

Where else have you seen a hamburger icon in use?  Let us know in the comments!

Leave a Reply

Your email address will not be published. Required fields are marked *