This question isn't about placement of the hamburger icons nor is it about the usefulness.

I've noticed on several websites/apps that the direction in which the hamburger icon opens a menu differs.

Is this difference tied to a screen size or is it becasue designers implement them without much thought to consistancy? Is it just a preference?

Here are some examples:

http://www.squarespace.com/ Hamburger menu slides out from right side of screen (at any screen resolution)

enter image description here

http://getbootstrap.com/ (mobile view) Hamburger menu slides down from top of screen enter image description here

Google Chrome Hamburger menu slides down from top of screen enter image description here

Facebook app on iOS Hamburger menu navigates to entirely new pane (no animations) enter image description here

5 Answers 5


The hamburger menu or a slider don't have any consistency, really. The implementations are very different from web app responsive design to native app more link. Both implementation use the same icon, three horizontal lines, to represent some sort of navigation, which don't fit on the current screen. This is equivalent with Microsoft more link, represented by three dots (...), to add more options that didn't fit.

The reason why sliding left or sliding right, keeping the menu navigation visible, isn't implemented on mobile devices - it would slide off the screen width or the font size would be to small.

The growing popularity of the menus implementation will surely streamline behavior in years to come, but today there is no real convention. It's just the same on a web page navigation. How do you see consistency there? There is none, but still users manage to find their way. The reason for that is the behavior of the control is the same. User expects extra navigation, and gets extra navigation. Where or in what direction isn't important.

  • 1
    Drawing a parellel to web page navs is a good point. Thanks.
    – Mark Bubel
    Jan 7, 2014 at 14:08
  • @MarkBubel You're welcome! It's often good to make cross reference and see if the bahavior exist elsewhere. Jan 7, 2014 at 14:24

The hamburger icon has been used to represent draggable items in the past and in present days. Therefore the classic representation of 3 horizontal bars should not be used without consideration. It can confuse users from all kind of background. Those who are familiar with mobile and those who are just discovering it.

Hamburger icon on a Scrollbar

Hamburger icon in Wunderlist

Hamburger icon in iOS7 Music app

  • hmm ... you are referring to the gripper icon, not the hamburger menu icon. They are two different things ... but you are right, they do share the same visual image. That said, there is a common use of the three-stack to represent an entry point to a menu of options for use in cases of limited space.
    – Erics
    Dec 12, 2013 at 23:53
  • I think the hamburger icon is well enough established as means to access a menu these days.
    – obelia
    Dec 13, 2013 at 1:15

The drop down is the older and more established convention. The side-slideout menu does have the advantage of keeping the menu more compact - a full width drop down menu, on a 7 inch tablet, can seem unnecessarily big and spread out. Of course a drop down doesn't have to take the full width, but in most cases it does.

I think it's mainly a matter of aesthetics and where your your break points are. Note that both of the examples you give work, they're both usable and understandable enough. The side-slideout is less conventional, but looks a little tidier at tablet sizes. If fact I bet the side-slideout was a created in response to the recent popularity of mid-size tablets.


Is this difference tied to a screen size?
Maybe. Depending on the screen size and the screen space available it'll be better to show the menu on the left, on the right, on top of something, moving the content to one direction and then showing the menu in that place (the side menu, on mobile, are represented using a hamburguer icon a lot of times, take a look: http://pttrns.com/categories/1-activity-feeds).

Or is it because designers implement them without much thought to consistency?
I believe that the consistency involved in this component is that it opens a menu that is a list, like "here is a list of what you can do", how to open it is a different matter, and I don't believe there would be a default behavior regarding direction since we use the component on very different situations.

Is it just a preference?
It definitely happens. As you are designing, there are aspects about function that you will think about, like the screen size, available screen space, the information presented on the screen, but there will be more subjective things like your taste or aesthetics.

What else could influence this decision?

Should the menu be fixed? If that is the case, you probably don't want it to sit on top of the content, maybe you will want to open it from left to right, pushing the content to the right and reducing the space available for it.

Where is the menu located? Is it on the right? Maybe you will want to open the menu from the right to left, so when it is opened, the cursor will be already on the menu area or very close to it. Look at your example from squarespace.com, after you click the menu, the cursor will be right on top of stories! You don't need to move the mouse too much, seems efficient to me.


The left or right placement of the hamburger menu button and it's sliding container is not bound to a specific standard.

There are platform recommendation/rules though, for example on iOS the design style guide suggest using it on the left side for maintaining all apps consistent.

But on the web it's placement is pretty flexible, without a need for standardizing it. As long as you are keeping your designs less distracting by moving navigational and other elements off the screen, available upon request, you have already solved a lot of user pain points!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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