Skip to main content
OverflowAI is here! AI power for your Stack Overflow for Teams knowledge community. Learn more
63 votes
Accepted

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

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 ...
Matt Obee's user avatar
  • 14.5k
36 votes

Alternative to hamburger menu? UI example inside

Nowadays there are plenty of options to show hidden navigation. It all boils down to what your favourite food is!: Kidding aside, ideally you want an evident way to show where you navigation lives. ...
Socrates Kolios's user avatar
28 votes

Mobile website menu. Should hamburger menu be on left or the right?

Replace hamburger menu with bottom navigation menu I know that I don't specifically answer your question but decided share the latest research about hamburger menus and a possible alternative. ...
Kristiyan Lukanov's user avatar
25 votes

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

I ran into many representations till now as well and wanted to present a couple of them below. Even they do look different, they're used to display representation of pretty same purpose like opening ...
Erhan Yaşar's user avatar
  • 1,768
20 votes

Mobile website menu. Should hamburger menu be on left or the right?

When hamburger icons first started becoming ubiquitous, they were placed on the left side. But as apps started iterating, like yourselves, the icon shifted the right side because it's easier to ...
Tarek's user avatar
  • 1,962
15 votes

Alternative to hamburger menu? UI example inside

The best icon is always text This being said, let's disect your problem a bit: First of all, that doesn't look like a hamburger menu at all, and the circle makes it even more confusing. On top of ...
Devin's user avatar
  • 38k
11 votes

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

I was referring iOS and Android design guidelines and they never mention the 3 dot icon as "kebab menu". In Android, they call it Overflow menu whereas in iOS they term it as More. For reference: ...
NB4's user avatar
  • 2,501
10 votes
Accepted

What breakpoint width to switch to mobile menu?

Forget mobile breakpoints, there's no phone and tablet sizes outside marketing. Breakpoints should follow the content, not the screen size. As a simple example, let's consider the menu: Home | ...
fregante's user avatar
  • 373
7 votes
Accepted

Where should the icon to the mobile menu be placed?

There's is a lot of research around that explains the way a reader's eyes naturally flow when reading, so you may find some of that useful. For example, you may get some insight from: http://...
Monomeeth's user avatar
  • 3,826
6 votes

Is top navigation an accepted pattern for mobile devices?

The good and bad of bottom nav Bottom nav was a great idea when Apple first came out with it. Steve was laser-focused on one-handed usability. The bottom nav was designed to accommodate fast and ...
plainclothes's user avatar
  • 21.3k
6 votes

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

Google has defined these icons in its design guidance. The so called burger icon is named with navigation icon which open the navigation drawers. These (material.io): navigation drawers provide ...
gotwo's user avatar
  • 163
5 votes

Mobile website menu. Should hamburger menu be on left or the right?

My conclusion after reading about UI structure in Google Material Guidelines is on the Left: Icons on the right side of the app bar are app-related actions. The menu icon opens the overflow menu, ...
Alvaro's user avatar
  • 16.8k
4 votes

Is top navigation an accepted pattern for mobile devices?

I think you should reconsider the bottom navigation: Bottom navigation is very well established in mobile apps, far more so than top navigation, and there is good reason for this. In most cases i ...
Joseph C Lawrence's user avatar
4 votes
Accepted

Why haven't more sites used the nav bar vs. the hamburger menu?

Hamburger menus, like it or not, are widely recognized Inertia: everyone else is doing it, so we did it and now it's done (until the next major redesign/funding come along) Burgers take up very little ...
Stonetip's user avatar
  • 737
4 votes

Alternative to hamburger menu? UI example inside

What if you surface some of the menu options that give you cold feet the most, and then provide a "More..." button? You could style the buttons to your liking and have as many or as few as you like.
54an3's user avatar
  • 41
4 votes

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

The three dots are known as an ellipses... and indicate there is more, that there's some presumption of awareness of current context and that there's more to it than that which is currently visible. ...
Confused's user avatar
  • 2,258
3 votes
Accepted

Should the hamburguer button have the same color as links?

In short, not unless you want it to. Links are generally coloured so that they stand out from all the other non-linked text. Buttons may have alternate colours to signify differences in function or ...
Roux Martin's user avatar
  • 14.2k
3 votes

hamburger menu vs alternatives for sites

The Nielsen/Norman Group have done some research into this: https://www.nngroup.com/articles/hamburger-menus/ Summary: Discoverability is cut almost in half by hiding a website’s main navigation. ...
SteveD's user avatar
  • 8,924
3 votes
Accepted

Mobile website menu. Should hamburger menu be on left or the right?

Thanks for all the answers, this topic has generated loads of valuable info and in the end I decided to do A/B test regarding burger position and so far I only ran it for small portion of my customers ...
Awfor's user avatar
  • 525
3 votes

Can the navigation on the Dashboard of an app be different from other pages?

Whether it's the hamburger menu or the menu bar, navigation should be consistent throughout your system. This features throughout most accessibility guidelines, is good for SEO, and is just generally ...
Roux Martin's user avatar
  • 14.2k
3 votes

Why haven't more sites used the nav bar vs. the hamburger menu?

Both (hamburger and nav bar) have advantages and disadvantages that make them suitable in particular contexts. It very much comes down to how much value your users get from functionality that you ...
krychu's user avatar
  • 1,331
3 votes
Accepted

If the hamburger menu is bad UX why do Google still use it

Unless you are able to get a hold of Google's design team directly, you likely aren't going to get a definitive answer to this beyond the explanations and technical descriptions given in the Material ...
Kane Ford's user avatar
  • 291
2 votes

Menu/burger menu bottom or top on mobile?

It makes more sense for ease-of-reach on a phone, yes, but issues around scrolling, brand/company placement and list order make it less desirable than upper left. 1. Distracting and in the line of ...
Paula Chuchro's user avatar
2 votes
Accepted

Making the hamburger menu static is a good practice?

If I understand the question, the answer is that it depends on the content you're trying to display. What it sounds like you're describing is a split view. [ This is a standard iPad pattern and it ...
saltdotac's user avatar
  • 341
2 votes

How to communicate visually the ability to change columns in a table

I think and "edit" icon or pencil could be misleading as the user may think they can actually edit the table's content. What about a solution that shows a Display All Columns option, along with the ...
hbowman's user avatar
  • 181
2 votes

How to communicate visually the ability to change columns in a table

I would do something like the following: download bmml source – Wireframes created with Balsamiq Mockups This allows the user to see all available options and have quick access to enabling/...
maxathousand's user avatar
  • 19.5k
2 votes

Alternative to hamburger menu? UI example inside

All the things you say are required for the hamburger menu sound like they are generally help based content. Couldn't they then be merged into your existing question mark/help button. I don't know ...
Flatlyn's user avatar
  • 156
2 votes

Apple's Hamburger Menu?

I think if using 2 lines will make the transformation into "X" more make sense than using 3 lines, which is in IOS it self 3 lines has a meaning already. Is Apple's or Google's meaning of the ...
Rob H. Yamin's user avatar
  • 1,789
2 votes
Accepted

Menu items to be included in Hamburger

First thing first: If this is for desktop, then you should NOT use a hamburger menu. However, if you're decided to do it, just test it and see how it goes. If this is for mobile, then proceed to the ...
Devin's user avatar
  • 38k
2 votes

If the hamburger menu is bad UX why do Google still use it

I see this question as 2 parts: Hamburger menu, if so much research has proven it to be poor UX, why does it still exist? Why does a company so well known as Google still use it? I'd like to answer ...
Ariel Spaulding's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible