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

Unpacking UI Icons: Hamburger Menus and Kebab Menus

Explore the common names and functions of the 'hamburger' menu icon (three horizontal lines) and the 'kebab' menu icon (three vertical dots) in user interfaces.

In modern user interface design, icons play a crucial role in conveying functionality quickly and efficiently. Two ubiquitous icons, often seen in applications and websites, are the 'hamburger' menu and the 'three vertical dots' menu. While their visual representation is simple, their official names and the functionality they represent are often a point of confusion for users and even some designers. This article aims to clarify their common appellations and typical use cases.

The Hamburger Menu Icon: A Gateway to Navigation

The icon featuring three horizontal lines stacked vertically is almost universally known as the Hamburger Menu icon. It's designed to resemble a hamburger: a bun (top line), a patty (middle line), and another bun (bottom line). Its primary function is to hide and reveal a navigation menu or sidebar, especially on smaller screens or when space is at a premium. Tapping or clicking this icon typically expands a list of navigation links, settings, or other options that don't fit directly on the main screen.

Visual representation of the Hamburger Menu icon

The Three Vertical Dots Icon: Contextual Actions Unveiled

The icon consisting of three vertical dots, also known as an ellipsis, is commonly referred to as the Kebab Menu icon. The name 'kebab' stems from the visual resemblance to shish kebab, where pieces of food are vertically stacked on a skewer. This icon typically indicates a menu of contextual actions related to the specific item or component it accompanies. Unlike the hamburger menu, which is for global navigation, the kebab menu's options are usually specific to the element it's next to, such as 'Edit', 'Delete', 'Share', or 'More options' for a particular list item or document.

Visual representation of the Kebab Menu icon

Implementing Menu Icons in Web Development

Implementing these icons in web development often involves using semantic HTML, CSS for styling, and JavaScript for toggling their visibility and associated menus. Here's a basic example of how you might structure a hamburger menu using HTML and CSS.

<nav class="navbar">
  <div class="hamburger-menu">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Basic HTML structure for a hamburger menu

.hamburger-menu {
  cursor: pointer;
  padding: 10px;
}
.hamburger-menu .bar {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}
.nav-links {
  display: none; /* Hidden by default */
  list-style: none;
  padding: 0;
}
.navbar.active .nav-links {
  display: block; /* Show when menu is active */
}

CSS for styling the hamburger icon and menu

1. Step 1

Understand the Context: Before choosing an icon, determine if you need global navigation (hamburger) or contextual actions (kebab).

2. Step 2

Maintain Consistency: Use these icons consistently throughout your application or website to avoid confusing users.

3. Step 3

Provide Clear Labels: While icons are visual, consider adding text labels or tooltips on hover/focus to clarify their function, especially for less common icons.

4. Step 4

Test Usability: Conduct user testing to ensure that your chosen icons and their placement are intuitive and easy to understand for your target audience.