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

  • 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

    The hamburger is used to open navigational menu items, whereas the dots seem to be often used to open settings options.

    hello “Doner Menu” refer to ..?

  • Matt Obee

    Matt Obee Correct answer

    3 years ago

    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

    is it called 'kebab' (three vertical dots) or more options?

    It's called a 'kabab' menu somewhat colloquially. It may well have a specific label like "more options" when it's actually used.

    Are Bento, Meatball and Doner menus also somewhat popular terms? They're hilarious, but I get the impression this is something clever by Wroblewski.

    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.

    I agree with you @ kojimajr the name sounds hilarious.

    Sheesh, anyone else stirring up an appetite? I feel mighty carnivorous all-of-a-sudden.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM

Tags used