26

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

1) 3 lines (a.k.a burger icon)
enter image description here

2) 3 dots (a.k.a kebab icon)
enter image description here

  • 4
    The hamburger is used to open navigational menu items, whereas the dots seem to be often used to open settings options. – drabsv Feb 11 '18 at 12:43
  • 1
    hello “Doner Menu” refer to ..? – DiDii Dec 10 '19 at 1:29
29

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:

enter image description here

  • 1
    is it called 'kebab' (three vertical dots) or more options? – NB4 Feb 1 '18 at 12:39
  • It's called a 'kabab' menu somewhat colloquially. It may well have a specific label like "more options" when it's actually used. – Matt Obee Feb 1 '18 at 14:27
  • Are Bento, Meatball and Doner menus also somewhat popular terms? They're hilarious, but I get the impression this is something clever by Wroblewski. – marley Feb 1 '18 at 14:56
  • 1
    I believe Luke did claim responsibility for naming the kebab menu, somewhat in jest. Others, like the "bento box" grid icon, take their name from an earlier design pattern. – Matt Obee Feb 1 '18 at 16:00
  • I agree with you @ kojimajr the name sounds hilarious. – NB4 Feb 2 '18 at 4:18
6

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

2

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.

1

I ran into many representations till now as well and wanted to present a couple of them below.

enter image description here

Even they look like different, they're used for pretty same purpose to opening the menu. Eventhough they preferred sometimes because of space limitations with their own representations, some of them of them used with separate illustrations within a theme so that called this way like hamburger menu, but I'm also not sure if that applies to all.

enter image description here

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.