UX Pickle

Know your menu: Hamburger vs. Kebab

Reading Time - 2 min

The three dots or kebab icon is a common icon used in many different applications. It is typically used to represent a menu or a list of options. The three lines or hamburger icon is also a common icon used in many different applications. It is typically used to represent a menu or a list of options.

The Difference

Both represent menus. However, the difference between the two icons is that the three dots, or kebab icon is typically used to represent an inline menu. The hamburger icon is typically used to represent a menu that is outside the screen and sides in.

Google has defined these icons in its design guidance.

The so-called burger icon is named with a navigation icon that opens the navigation drawers. According to Google, “navigation drawers provide access to destinations and app functionality, such as switching accounts.” The 3 dots icon is named as overflow menu. Google gives an explanation, “App actions are placed on the right side of an app, either as icons or in an overflow menu.”

Note, this is just the Google definition. But, Google uses these icons on Android in fact intensively. Other companies or programmers may also use these icons different.

In general, you should use the burger icon when you have an action that results in opening or showing a list that has options that take users off the screen and use the 3 dots for an action that results in an App action or starting a new activity on the same screen.

Other Types of Menus

There are other types of menus as well. Other menus include chocolate, cheeseburger, veggie burger etc. These types of menu icons represent some very specific things. So, if you are using one of these icons, then it is very important that the context and meaning is very clear to the users.

enter image description here

When in doubt, always assume that the 3 dots, or kebab icon means menu. If you see the 3 lines or hamburger icon, it typically means a navigation drawer.

Leave a Reply