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

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

enter image description here

  1. 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
    Commented Feb 11, 2018 at 12:43
  • 1
    hello “Doner Menu” refer to ..?
    – DiDii
    Commented Dec 10, 2019 at 1:29

5 Answers 5


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
    Commented Feb 1, 2018 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
    Commented Feb 1, 2018 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
    Commented Feb 1, 2018 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
    Commented Feb 1, 2018 at 16:00
  • I agree with you @ kojimajr the name sounds hilarious.
    – NB4
    Commented Feb 2, 2018 at 4:18

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.

enter image description here

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.

enter image description here

  • 6
    The "Cheeseburger" menu made me laugh... does this actually exist in the wild? Commented Jul 17, 2020 at 13:34
  • I also haven't ran into many of the provided menus above but i think ıt's a bir surrealism as well since not applicable in many cases. Commented Jul 17, 2020 at 15:23
  • bento vs chocolate; doner vs strawberry; when the first img is used? Commented Oct 17, 2020 at 6:21
  • If you want to ask another question (even related to this or other asked topics), it's better to issue another one @Smart Manoj. Yet I don't know the answer. Commented Oct 17, 2020 at 6:45
  • @ErhanYaşar source for these images Commented Oct 25, 2020 at 16:17

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


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.


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.

  • 1
    So, you don't like vertical ellipses, then? It's difficult to tell for sure.
    – LightCC
    Commented Oct 20, 2022 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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