How Burgers and Kebabs

Became Part of UI Design

They say artists need to stay hungry to create masterpieces. Designers are artists too, but they create on digital canvases. Staying hungry, however, isn’t easy when your workday involves terms like hamburger, doner, kebab, and meatball. These aren’t just food names—they’re key parts of modern interface design! Let’s dive into this tasty topic.

Hamburger Menu

Hamburger Menu — three horizontal lines, the classic symbol for opening the main menu.

You’ve likely come across this icon often, as it’s considered a universal solution easily understood by most users. For example, it’s used in the Facebook mobile app and Spotify’s web version to navigate to playlists or libraries.

This menu type was created in 1981 by designer Norm Cox for the Xerox Star computer. However, it became widely popular with the rise of smartphones, where saving screen space became essential.

The Hamburger Menu can be called the prototype for all the "edible" menu variations that came later. Starting in the 2010s, designers began experimenting with new ways to make navigation buttons stand out, giving rise to icons like the Alt-Burger Menu and Döner Menu.

Alt-Burger Menu

This is a variation of the classic Hamburger Menu, featuring two horizontal lines instead of three. It was designed to address usability issues associated with the standard version. While the classic Hamburger is a universal navigation element, it’s often criticized for being too hidden, which can reduce user engagement with a website or app.

Döner Menu

Another variation, the Döner Menu, appeared in 2020 and is often used in user interfaces. Unlike the Hamburger Menu, which has three identical horizontal lines, the Döner Menu features three vertical lines of varying lengths: a long one at the top, a shorter one in the middle, and an even shorter one at the bottom. This icon is typically used to reveal a set of filters.

These creative variations stand out from standard solutions while retaining their functionality.

Kebab Menu

Three vertical dots—this menu is perfect for contextual options. You’ve likely seen it in apps like Spotify or YouTube Music, next to your favorite tracks or albums.

The Kebab Menu is a common choice for mobile apps and websites as it saves screen space. For instance, it’s often used in mobile blog layouts or compact interfaces. It allows users to perform actions related to specific elements, like opening context menus for tracks or posts.

Meatball Menu

This menu, represented by three horizontal dots, serves a similar purpose to the Kebab Menu. It gives access to secondary options, like “delete” or “forward” in messaging apps such as Telegram.

The Meatball Menu is a great fit for compact interfaces, where additional settings need to stay hidden until needed.

Bento Menu

Nine dots arranged in a grid—this menu is commonly used for navigation or accessing advanced features.

The Bento Menu is a great choice for websites or apps with many categories that don’t require constant access. For example, Google Apps use the Bento Menu to open a list of their services.

We hope you didn’t get too hungry reading this flavorful article and managed to digest the differences between these menu types!

How SEO Is Changing in the Age of AI

21-10-2025

AI is transforming search. Learn how SEO evolves into AEO and GEO — where visibility means being cited in AI answers, not just ranked in results.

Learn more

Keeping the Human Mind Sharp When AI Can Do It All

16-10-2025

AI makes work easier, but thinking harder. Learn how to stay creative, critical, and human in the age of intelligent machines.

Learn more

AI Workslop: Why Businesses Pay Freelancers to Fix AI

07-10-2025

AI speeds up work but often creates “workslop” - results that look complete yet lack value. Freelancers are the ones turning them into quality.

Learn more

Disney Creative Strategy: How Ideas Become Reality

03-10-2025

Disney Creative Strategy: dream, plan, critique — a tool to guide ideas from imagination to real-world results.

Learn more

Upwork Boost: Increasing Freelancer Profile Visibility

29-09-2025

Discover how Upwork’s Available Now badge and Profile Boost work, their costs, pros and cons, and which boost is best for freelancers or agencies.

Learn more

10 Posts to Help You Get Started on Upwork

29-09-2025

We’ve gathered a set of articles to guide you through the essentials — from setting up your profile to building long-term client relationships.

Learn more

Etcetera summer 2025 report

26-09-2025

Etcetera summer 2025 results: quiet season, new team members, shifting Upwork rules, and plans for an active autumn.

Learn more

Upwork Feedback: a trust tool you should learn to read and write

22-09-2025

Upwork feedback is more than stars — it builds trust, shapes reputation, and guides choices. Learn how to read, request, and write reviews effectively

Learn more