Illustration

Hamburger Menu

What is a hamburger menu?

A hamburger menu is a navigation menu that is represented by three horizontal lines (resembling a hamburger), commonly placed in a top corner of a website or mobile application. When clicked or tapped, it opens a list of links or options that allow users to navigate to different sections of the website or app.

Hamburger menus are used as a way to condense navigation items into a smaller space, allowing more room for the main content on smaller screens such as mobile devices. They are also used as a way to hide navigation items that are not immediately necessary, creating a cleaner look and reducing clutter.

The hamburger menu icon is becoming a common convention in responsive web design and mobile app design, but it's not without its criticisms. Some argue that it can be less discoverable for users, making it harder for them to find and access navigation items, especially for first-time users.

It's important to consider the user experience and accessibility when using hamburger menu. Some best practices include providing clear labels, placing the icon in a consistent location and providing visual cues when the menu is open.

What are the pros and cons of using a hamburger menu?

The hamburger menu has both advantages and disadvantages when it comes to user experience design:

Pros:

  1. It conserves screen real estate: By hiding the navigation items behind a hamburger menu, it allows more room for the main content on smaller screens such as mobile devices, keeping the interface less cluttered.
  2. It simplifies the interface: By condensing the navigation items into a single icon, it can make the interface less overwhelming and easier to understand for users.
  3. It allows for more flexibility: Hamburger menus can be used to reveal different navigation items depending on the context of the user's task, making it easy to switch between different sections of an app or website.

Cons:

  1. It can be less discoverable: Hamburger menus are not as immediately obvious as traditional navigation bars and can make it harder for users to find and access navigation items, especially for first-time users.
  2. It can be confusing for users: Hamburger menus can be less intuitive for users, making it more difficult for them to understand how to navigate the app or website.
  3. It can decrease user engagement: By hiding the navigation items behind a hamburger menu, it can make it less likely for users to explore the different sections of an app or website, potentially decreasing user engagement.

It's important to consider the context and the user's needs when deciding whether to use a hamburger menu or not. It can be a useful tool when used correctly, but it's important to make sure that the navigation is still discoverable and intuitive for users.

Design Terminology

Learn more about most common icons & terms in design

Check out our UX Research course and start improving your UX design skills today.

Start for free