What is the difference between these 2 menu icons: 3-dots (kebab) and 3-lines (hamburger)

Question

What is the difference (if there is any...) between these 2 menu icons?

1. 3 lines (a.k.a burger icon)
   

2. 3 dots (a.k.a kebab icon)
   

Answer 1

Generally speaking they are used to open different types of menu.

• The 'burger' is used to open a 'burger menu', which is presented as a drawer that appears from the side of the screen and occupies most of the screen;
• The 'kebab' (three vertical dots), which originated in Google's Material Design languge, is designed to open a smaller inline menu from a button or other control.

In terms of icon naming specifically, Google refers to the burger menu as "menu" and to the 'kebab', vertical or horizontal, as either "more horiz" or "more vert".

Here's a good demo from Luke Wroblewski of kebab and other menu options:

Answer 2

I ran into many representations till now as well and wanted to present a couple of them below. Even they do look different, they're used to display representation of pretty same purpose like opening the menu. Eventhough sometimes they're preferably used one over the other because of space limitations with the representations they have, I ran into cases where one prefered in terms of related context. i.e. hamburger menu for fast food context.

Not possibly applies to all but, sometimes they're used to represent distinction between opened and closed menu representations. Since space for mobile also restricted, like kebap icon looks like saves more space as representing open menu while hamburger or chocolate menu represents closed one.

Answer 3

I was referring iOS and Android design guidelines and they never mention the 3 dot icon as "kebab menu".

In Android, they call it Overflow menu whereas in iOS they term it as More.

For reference: Android - https://material.io/design/components/app-bars-top.html#anatomy

iOS - https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/#tab-bar-icons

Answer 4

Google has defined these icons in its design guidance.

The so called burger icon is named with navigation icon which open the navigation drawers.
These (material.io):

navigation drawers provide access to destinations and app functionality, such as switching accounts.

The 3 dots icon is named as overflow menu.
Google gives as explanation for that: (material.io):

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 use with Android these icons in fact intensively. Other companies or programmers may also use these icons different.

Answer 5

The three dots are known as an ellipses... and indicate there is more, that there's some presumption of awareness of current context and that there's more to it than that which is currently visible.

Originally it was used flatly, just like so ...

It was made (sometimes and increasingly more often) vertical because the hamburger menu is a vertical stack, and was gaining in popularity, so those that tend to copy without much thought went: "oh, perhaps we should make it vertical and pretend it's a thing".

The hamburger is a visual abbreviation for a vertical menu, or list. So it makes sense as an icon.

As does the ... ellipsis.

The vertical ellipsis is just silliness.

But gaining popularity because Google Material wants to imagine itself a thing, and arbiter, and some people want to ascribe to this delusion.

Apple, for quite a time, wanted to prevent all these types of things, as they considered any need for them an indicator of bad app design. They might have had a point.

The conventions that have come about because of their continued and increasing usage are essentially:

Menus = hamburger More Actions = ellipses

This, to some extent, makes sense, too.

The vertical ellipses is just an abhorrent misstep. Use it for whatever you want.