Icons — the graphics on a screen of a computer, app, or website. But not everyone knows what they are, or what they represent. For the user who is scrolling and wants to go into a specific part of the interface, be it a luxury website, an Apple computer, or a Kindle, identifying navigational menu icons can be a specific part of the problem.
You need a navigation to direct you to other sections, but where are the buttons you need to press? Why are they hidden? And once you accidentally hover over or click on it, why do they look like that?
In this article about UI navigation, we’ll break down every common menu icon and why they’re useful — hidden or not. If you’ve ever wondered about the three little lines in the top corner of a website, or the vertical dots in a Google Suite program, or their purposes, we’ve got you covered.
We’ll identify, classify, and examine each icon, with the criteria that they are navigational menu icons, and that they have a specific use case. Let’s begin.
These three lines represent the elements of, you guessed it, a hamburger. The hamburger menu takes its name from the iconic picture a hamburger brings to your head: bottom bun, meat, top bun:
It was designed in 1981 by Norm Cox, initially used to indicate a list in the Xerox Star system. But it wasn’t in common UI usage until two decades later, when designers needed a simple but useful way to create a navigation menu in smartphones — allowing for the many buttons to be contained in such a small screen.
When hamburger menus first appeared, they confused visitors, because at that time, many interfaces were still using traditional text menus. The hamburger menu could appear anywhere, with left and top bar being the most common then, and the right and bottom the most creative cases.
But now it’s a common way for users to navigate within a website. In fact, the hamburger menu is the most used of all navigation menus and can be found anywhere on the screen.
Its simple and useful design triggers curiosity and reveals more by clicking the icon or hovering over it. This is most useful to those with comprehensive navigation in their interfaces that they are trying to clean up by collating sections in one container; rather than those websites or programs with menus of only two or three buttons.
The kebab menu is similar in concept to and is inspired by a hamburger menu. It is three dots, representing the elements of the traditional Middle Eastern food: a kebab. The kebab, in food preparation and in the navigational menu usually takes the form of a vertical three-dot shape:
Due to its similarities to the hamburger menu, Google has actually given distinct definitions for hamburger and kebab menus.
Google says regarding the hamburger menu, “Navigation drawers provide access to destinations and app functionality, such as switching accounts.” This means that the hamburger menu is solely used for internal navigation. In contrast, the kebab menu is for the overflow menu, or external navigation. Or as Google says, “App actions are placed on the right side of an app, either as icons or in an overflow menu.”
While this is Google’s way of detangling the distinct definitions of the two menus, there are many instances where the two definitions overlap, in what we have seen of the many websites, apps, and programs that use these two menus. Nonetheless, this is a useful distinction for users as well as for designers.
Unlike the hamburger menu, which can appear anywhere, the kebab menu is usually on the top right or placed somewhere on the top of the screen.
The döner menu is a variation of the more famous hamburger menu, yet the döner menu is the most commonly used icon in the UI of today. While the hamburger menu consists of three lines of equal length stacked together, the döner menu consists of three stacked vertical lines of varying lengths: one long line, a shorter line, and an even shorter line:
Named for its similarity to the Turkish delicacy known as döner, the use case for this UI design element is for filtering items on the program or website: the döner menu opens a dropdown navigation drawer. It’s usually used in conjunction with sorting or “sort by” options. In modern usage, it’s very commonly used with global filters.
If you haven’t yet had your fill of user interface design icons involving food, here’s another one for your order: the bento icon. Consisting of nine dots in three rows and three columns, the bento menu is simple and understated, like the other UI design elements we’re listed here:
Named after the Japanese packed lunch, or the bento box, the bento navigational menu icon makes a famous appearance in the UI of the Google Play store. Yet, it is a commonly used menu icon everywhere else, too, often seen in the upper right corner of the screen.
Like its food container inspiration, a bento menu organizes different functions that can be found in the same product. A bento box for lunch in Japan would usually have lunch food — so, too, does the bento menu only contain the options that are found within the app or site you are browsing.
The meatballs menu icon is a horizontal menu, unlike the vertical orientation of the others. It consists of three dots laid out next to the other, often appearing in the top right corner of the screen, akin to what you would see atop a spaghetti meal: meatballs:
It is also called the ellipsis menu, due to its design similarity to the three dots of grammatical function in writing.
This menu is mostly used to open up additional options. Meatball menus, once clicked, contain links to related items or related actions not seen on the main screen.
It’s also used widely on the web due to its accessibility — its simple three-dot design is often versatile. It’s used for more settings, help settings, accessibility options, file management options, or other tabular or graph-like systems.
A frequent UI design element in the contemporary age is the breadcrumbs menu. The icon for this is the arrow, and when clicked, it allows you to navigate back or forward. Some programs use one or more arrows, some use specifically three arrows:
In a time when the user experience and customer journey are at the highest priority, the breadcrumb menu is by far the most cognizant of the user. It guides the user throughout the whole experience of going from the main page to the last page, while making sure the user can locate themselves.
In practice, it’s most used for file management systems, ecommerce websites, or any other applications. It is used specifically by sites that necessitate an intricate trail of breadcrumbs to track the user or customer journey.
We can’t talk about menu icons without talking about the historical basis for how they evolved. While hamburger, bento, and kebab are interesting names for specific navigation menu icons, these next few UI elements are types of navigational systems that have evolved historically to encompass them.
This is the most common type of navigational menu, which is common amongst the food-inspired menu icons above. The hamburger menu is in essence an icon for a flyout menu. It is a compact solution to mobile responsive websites and a stylish alternative for desktop.
A dropdown is usually contained within a responsive navigation bar. And, it is usually hover-activated. Due to this reasoning that the content only pops out when it is hovered over, designers find this a controversial menu system. However, it is still seen in most websites and systems, like Microsoft, where you have to click it to drop down and click it to hide it again. The döner menu is sometimes used with a dropdown menu.
The standard horizontal navigation menu started it all. The standard horizontal is the classic navigation menu used in all old websites, programs, and apps, and it’s still used in some of these today. It represents a horizontal list on the main site page, usually the homepage, which rolls over to link labels to present fly-over menus.
Carousel navigation shows multiple pieces of related content in a limited space, while allowing for easy scrolling between them. It displays a rotating set of content, showcasing each one like in a circus carousel ride. Its main use case is to display easily navigable information, like images, videos, links, text slides, and more.
Accordion menus usually have a plus button on the link label. They are useful when you want to toggle between hiding and showing large amounts of content. These were and at times still are the side navigation menu choice of most blogs, which have tabs and related content on the side in accordion format.
If you think you haven’t seen a waffle menu outside of your favorite IHOP restaurants, wait until we tell you that Microsoft, Google, and Microsoft Office UI navigation menus are represented by the waffle:
Although the waffle is named like its other icon counterparts, it is not actually a UI menu icon, but rather a UI element. It’s a specific design arrangement that, once clicked, showcases different app elements in one large grid.
In the middle of the 2010s, Google unveiled a menu grid that was a new direction toward less minimalist, more logo-centric graphics. This allowed for a huge pop-up window to appear that showed a slew of icons for other parts of the system, in a wide graph format. First seen in Gmail, it later took over all of Google’s applications and websites in that period.
While Microsoft followed this trend with their desktop design and their Office 360 later on, this waffle design is not one of the minimalist designs favored by UI designers. While this might be easy for the user theoretically because they would see all the icons at first glance, it proved with time to be an overwhelming load of information for the user.
Using menu icons correctly is pretty simple. It all boils down to this:
With all the food options nowadays, it’s tempting to just get the first thing that catches your eye, be it the hamburger, meatballs, kebab, bento, döner, or what have you. It’s not quite the same for UI design.
Before you settle on one or two of them for your site or app, make sure to determine what is best for your users. Do you know what kind of navigational setup works best for the age group of your users?
Studies show that older generations do not prefer minimalist design. They find them hard to use. And, there’s been pushback in recent years against the hamburger menu because, though it’s the most favored by designers, the hamburger is not favored by users.
Do you want to show navigation menu icons for easy scrolling internally throughout your website, or do you want them to see your collated links from outside of your website? The answers to this question will depend on many variables, such as your UI interface, your product, or the demographics of your users. We hope this helps.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Designing a great hero section can help make a great first impression on users while expressing your product, service, or company.
I’m confident that these interactions will continue to improve, with some patterns becoming obsolete and new UX patterns emerging.
Figma’s auto layout was recently updated with some new features. Let’s explore what these features are and how to use them.
Re-engagement doesn’t have to feel desperate. If users churn, there’s still hope. Here’s how UX can bring them back — and make them stay.
Learn more →
2 Replies to "Every common UI menu icon and its use case"
“… iconic picture a hamburger brings to your head: patty, meat, patty.”
That’s just three layers of beef!
Whoops, that’s true! Thanks for catching that. It’s updated now — although since the three lines are uniform, maybe they do look more like three layers of the same thing!