I'm aware that the usage of the sandwich icon and side bar for mobile apps is wide-spread and well known by the users (so it seems, anyway), like this one from the Facebook app:

enter image description here

I'm developing an interface for an web online digital menu for restaurants and I believe this concept might come in handy for navigation purposes.

The only thing I'm afraid of is that this may not be clear enough for web users who aren't using a mobile / tablet.

My question is: is this a good choice or is this probably going to pass unnoticed? Maybe, given the lack of other navigation menus, the users will be curious/persistent enough to find it?

  • 1
  • 1
    Here are a few other questions we've had on this topic if the one Cimmanon linked to isn't enough. – JonW Oct 30 '13 at 13:30
  • 2
    I understand the duplicate suggestions, but I'm asking about this concept OUTSIDE a mobile environment. I believe this is still relevant to be asked. – arvere Oct 30 '13 at 13:33
  • 2
    Ah, it wasn't clear from your question as it was written that you're explicitly referring to desktop devices, not mobile. I'll edit it a bit for you to make that distinction and reopen it. – JonW Oct 30 '13 at 13:41
  • 3
    There are examples of widely used applications which use it on the desktop. Exhibit A: Google Chrome. (Also Evernote's web frontend). So intuitively speaking, I think that this is a trend which will catch on from mobile to desktop. So I would tend to say go for it, just don't have enough certainty to give it as an actual answer. – Rumi P. Oct 30 '13 at 13:47

No. We assume that people will see it as a menu button, however in the past it has been used as an icon for draggable elements and it is still today.


Users who have just upgraded to present operating systems might have another vision on the sandwich icon because of their old operating system.

Draggable icon on a Windows XP scroll bar.


Some apps and even operating systems like iOS7 use the sandwich icon to show something is draggable.

Draggable icon in the Wunderlist app.

Draggable icon in iOS7.

I believe that you shouldn't hide the menu on a desktop site. Don't let your users think about where they could find the menu. You could however add a label to the sandwich icon to keep things simple and usable.

  • I honestly don't even aware that the icon is there in the scrollbar... maybe because of different context? – deathlock Nov 5 '13 at 13:09
  • I think that Apple(IOS) are the only ones who use it as an icon to showcase an item which can be reordered. – HarveyZA Nov 6 '13 at 7:52
  • EPIC ANSWER!!!!!!!!!! – clickbait Feb 15 '19 at 2:32

If a user is a regular mobile web user, he/she will for sure understand the sandwich icon but as the sandwich icon is used because it occupies less space than writing "Menu". Thus on web, user might not pay that much attention to sandwich icon due to its small size and users who not avid in using mobile web will may not understand it at all. Thus, it's better to use a 'Menu' button if you can spare that much space as it is more universal.

  • In the context of a desktop site, this means to me "List of items that weren’t worth screen space for a real graphical control element". Such a generic looking icon is literally the last place I'd click. Then again, I'm not a big mobile user. – Adria Nov 30 '14 at 17:11

I think that everyone now understand this icon and the action that follows after you click it. But of course it's a right thing to assume that there's somewhere a guy that never used mobile phones (whaaa?) and can not really connect in his head a hidden navigation menu (or whatever you try to hide) and "the sandwich".

I see two solution:

  1. Try to demonstrate user what happens when you click on the button during the first launch of your web application. Let's assume that when you click on the sandwhich navigation menu appears from the left (as seen on your example). So, just for example, let's show the hidden menu when the page is loaded for a second or two and then slide it away. At the same time you can change the state of the button (pushed/standby) so user can connect this two actions and will know how the stuff works. You can disable this demonstration after first launch or after the first click on the sandwhich this way you can be sure that user got the idea.

  2. If you really think that this might cause usability problems maybe you should reconsider the whole UI structure. Maybe there's other way to show navigation, or maybe there's no need to hide whatever you're hiding behind "the sandwich". Maybe you should ask yourself: If this "sandwhich" is here for the sake of "a sandwich"?

What do you think?

  • 1
    In my testing users still miss it. Patterns like these take a long time to adopt. (A significant portion of participants still fail to understand the logo can take you home.) Your option #1 is a solid solution, though, as long as the animation is smooth enough to be understood. – Zak Oct 31 '13 at 15:45
  • 1
    I had to look at the question and answers several times to figure out what 'sandwich icon' meant, and I know quite a few who don't ever use a mobile phone. Careful of your assumptions. – thursdaysgeek Nov 1 '13 at 16:11
  • Hey guys! I said that it's a right thing to assume that there're people that don't know what this icon means and I've offered two good solutions ... should I be careful with this assumptions?? @thursdaygeek I don't get it. I've offered two great solutions for the problem. Maybe you should read the answer to the end prior to comment? – LoomyBear Nov 1 '13 at 20:40
  • 1
    @LoomyBear Yes, you did have an answer that said to deal with users who might not know what it meant, but you started by saying that you were pretty sure everyone knew what it meant, and expressed surprise that there might still be people who don't use cell phones. So it was your introductory remarks that I took issue with (although not enough to downvote the answer). – thursdaysgeek Nov 4 '13 at 17:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.