We provide a run-down of all the different types of web menu icon...
Writing this Tech Tip got us working up an appetite!
When browsing the internet, you will have seen these little graphics dotted around. When clicked on or hovered over, they normally reveal a hidden menu/list of sorts, in most cases leading to further information. Collectively these little graphics are known as Menu icons. Individually, the icons' names vary - depending on what part of the world you are in - but on the whole they tend to stick to a food theme. Today, we thought we would give you a little taster session of these tantalising graphics to whet your design palate.
The Hamburger
The king of the web menu icons is the hamburger. Get it? Burger King. We profusely apologise. This icon is depicted by 3 vertically stacked horizontal lines of equal length; it looks like a burger wedged between a bun. Like its edible counterpart, the hamburger icon is universally recognised, making it the popular, safe choice - versus its ‘trendy’ alternatives - when seeking out an intuitive and enjoyable user experience (UX). You will normally find this icon in either the top or bottom corner of a website or app. Its presence indicates that there is further content to be explored beyond the confines of the current page or screen. Or in simpler terms, when you click on the hamburger, a list is revealed. Click on one of the items on the list and you will be taken to a different web page. The information on pages stored within a hamburger menu are generally of secondary importance and are not deemed critical to the user journey. It is a great way of keeping your design clean (not cluttered) when space is limited.
Therefore, you tend to see it a lot on mobile versions of websites and apps as the screen is smaller. The general consensus is to avoid using the hamburger icon on a desktop view as it can become lost on such a big screen. However, if your website proves content heavy on desktop, the hamburger icon would be a great device in streamlining your design and reducing visual overwhelm. In most cases, a hamburger menu is contained on the outside of or beyond a screen (like being off camera in a video). When you click on the icon, the whole screen will move and the menu will appear to slide in. You can check this out on the Appdrawn website. It is also possible for the menu to reveal itself as an overlay.
Example - Appdrawn website
The Kebab
The kebab icon was initially rustled up by the team at Google when they released Material Design - their “design language”. It is denoted by three vertically stacked dots resembling a kebab. Google calls the item ‘More Vert.’ Vert is shorthand for vertically; they are not asking for more green! The kebab icon is used to represent an overflow menu. What do we mean by that? Think of app bars or toolbars. These contain a series of various action buttons. Those buttons will have been ordered from the most used on the left through to the least used on the right. In some app bars or toolbars, there is simply just not enough space to display all the actions on the screen. This is where the kebab icon comes in handy. Its inclusions and presence at the end of an action or toolbar, indicates that there are further actions and tools available. When clicked on, the kebab item will reveal an inline menu - a menu that drops down or reveals itself in line with the icon - with more commands or options. On the whole the app actions or tools contained within this menu tend to initiate new activities on the same screen.
Well known example: Google Chrome
Meatballs
On top of spaghetti… you find meatballs! Turn the kebab icon 90 degrees and there you have it, another web icon at your disposal. The meatball icon is simply 3 horizontal dots… maybe some rolled off the table, onto the floor and out the door? Like its vertical friend, when clicked on, the meatball icon will reveal an overflow menu, be it a pop up or dropdown. Again, it is usually home to additional options, commands, settings, help or feedback, relevant to the current context. Due to the horizontal nature of the design, this particular icon is the perfect accompaniment to web elements that share a horizontally oriented design for e.g. a table. To summarise, the meatballs icon is pretty much the same as the kebab but for horizontal design. Google didn’t beat around the bush, when aptly naming the icon ‘More Horiz’.
Well known example: Skype
Bento or Candy Box
This grid-like icon conjures up a variety of food connotations. There is the candy selection box for Americans or also Bento boxes, which are the Japanese, reusable, single-serving food containers that have lots of different compartments. You will typically find the bento or candy box icon up in the top right hand corner of a user interface (UI). It is used to open up a menu displaying the various applications, solutions or functions that come under the umbrella of the same product. A great example of this is Google Workplace with Gmail, Drive, Docs, Sheets, Slides etc. It is a quick and easy way of switching between the products - all it takes is 3 clicks!
Well known example: Google Workplace
Strawberry or Döner
Like the hamburger, this icon is denoted by three vertically stacked, centrally aligned, horizontal lines, yet the lengths are different; the top being the longest and progressively getting shorter going down. The shape resembles a strawberry or the popular Turkish dish. It also resembles an object you may have used in science experiments at school: a filter. That is exactly what this icon is used for on the web. Filtering. You may have seen it used in conjunction with a sort by function when making a purchase. When you click on the Döner icon, a menu will appear with a list of filters you can refine your search by.
Well known example: Trello
Other
There are a few alternatives floating around the world wide web but they lack a definitive explanation. Nevertheless, you may have also seen:
Chocolate
Cheeseburger
Hot Dog
Veggie Burger
Fries
Stairs
Cake
Oreos
