20

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

  • 3
    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
23

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
4

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

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.