What is the hamburger menu icon called and the three vertical dots icon called?

Unmasking UI Icons: Hamburger Menu vs. Three Dots

Explore the common UI icons – the 'hamburger menu' and the 'three vertical dots' – understanding their names, functions, and best practices for their use in modern application design.

In the world of user interface (UI) design, certain icons have become ubiquitous, yet their official names and precise functions can sometimes be a source of confusion. Two such icons are the 'hamburger menu' and the 'three vertical dots'. While widely recognized for their appearance, knowing their proper terminology and intended use is crucial for clear communication among designers, developers, and users. This article will demystify these common UI elements, providing clarity on what they are called and how they function.

The Hamburger Menu Icon

The 'hamburger menu' icon is perhaps one of the most recognizable UI elements, typically consisting of three horizontal lines stacked vertically. Its primary purpose is to toggle the visibility of a navigation menu, often revealing a list of links or options that are too numerous to display prominently on the main screen. This design choice is particularly prevalent in mobile applications and responsive web design, where screen real estate is at a premium.

flowchart TD
    A[User sees Hamburger Icon] --> B{User Taps Icon?}
    B -- Yes --> C[Navigation Menu Appears]
    C --> D[User Selects Option]
    D --> E[Action Performed / New View]
    B -- No --> A

Typical user interaction flow with a hamburger menu.

While commonly referred to as the 'hamburger menu' due to its resemblance to a hamburger, it is also sometimes called a 'navicon' (short for navigation icon) or simply a 'menu icon'. Its effectiveness lies in its ability to declutter an interface, but designers must ensure its presence is intuitive and discoverable, as hiding primary navigation can sometimes lead to reduced engagement if not implemented carefully.

The Three Vertical Dots Icon (Kebab Menu)

The 'three vertical dots' icon, often referred to as the 'kebab menu' or 'vertical ellipsis', serves a different but equally important function. This icon typically indicates the presence of a contextual menu or a list of additional options related to a specific item or section. Unlike the hamburger menu, which usually controls global navigation, the kebab menu's options are localized and relevant to the element it accompanies.

flowchart TD
    A[User sees Item with Kebab Icon] --> B{User Taps Icon?}
    B -- Yes --> C[Contextual Menu Appears]
    C --> D[User Selects Option]
    D --> E[Action Performed on Item]
    B -- No --> A

Typical user interaction flow with a kebab menu.

Other names for this icon include 'more options', 'overflow menu', or simply 'ellipsis menu'. The horizontal version of this icon (three horizontal dots) is known as the 'meatball menu'. Both are used to condense less frequently used actions or options, preventing the interface from becoming overwhelmed with buttons. It's crucial that the options revealed by the kebab menu are directly relevant to the item it's associated with, maintaining context for the user.

Distinguishing Between the Two

While both icons hide content to simplify the UI, their roles are distinct. The hamburger menu is for global or primary navigation, revealing a site-wide or app-wide menu. The kebab menu, conversely, is for contextual actions pertaining to a specific element. Understanding this distinction is key to designing intuitive and user-friendly interfaces.

Hamburger vs. Kebab: Global Navigation vs. Contextual Actions