Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

It can be found for example in the YouTube and Facebook app. enter image description here enter image description here

share|improve this question
    
As far as I've heard the hamburguer menu (at least on mobile apps) was introduced by Loren Britcher on a twitter client or app of his own, as the "drag downward to update" gesture, and then twitter bought his Idea for a 1-digit-million(s) xD. Read about that a while ago so I'm not sure about how right am I. do some research on it guys xD –  aleation Jan 22 at 8:53
1  
I believe it is important in this type of discussion to include the principle of "Out of sight, out of mind" which has been a major problem with these type of interfaces: thenextweb.com/dd/2014/04/08/… –  JeroenEijkhof May 5 at 1:04
    
@mcb I'm not sure what you're referring to. I'm just pointing out that when site/app features are hidden in a menu engagement drop. This is based on the article I linked. –  JeroenEijkhof May 9 at 1:35
    
@mcb It's not sad. I'm not saying off-canvas interactions don't work. I am saying that "out of sight, out of mind" needs to be considered when designing interfaces with that pattern. –  JeroenEijkhof May 9 at 1:36

9 Answers 9

up vote 47 down vote accepted

I believe the going name for it is a Hamburger Menu, as a reference to the icon that's commonly used for it (ux-hamburger-drawer-icon.333-tr.s20, similar to the Unicode character ≡ U+2261 Identical To), and to the stacked nature of the drawer itself. Hamburger Drawer and Hamburger Sidebar would also be recognizable terms to the UX community.


A bit of discussion on what I believe to be the proper usage of the term:

The menu itself is nothing new; sidebar menus with links to various parts of an app/site have been used this way since the early web (and probably elsewhere perhaps earlier still).  Also, buttons that toggle hidden content or optionally allow dragging to reveal content have also existed for much longer than touchscreen smartphones; the drawer in older versions of QuickTime Player and OS X's color picker swatch drawer are good examples of this.

This pattern is then best described as the combination of the drawer menu and reveal/hide button patterns in a manner where:

  • The main content slides out of the way to reveal the drawer by button tap or drag,
  • The drawer content is meta content intended for temporary access (navigation buttons, chat contact list, etc.),
  • Tapping back on the partially-visible main content area closes the drawer,
  • The activation button is always visible, and featured in the “navigation” header/footer immediately next to the side the drawer will appear on.

There exists (of course) variants that bend the above guidelines— some implementations may only allow tapping (not dragging) the button, or the tap-to-restore-main-content functionality might be omitted when presenting the same app on a larger-screen device, or the drawer might be oddly used for something non-clickable.  Because of this, the above points describe the idealized and common form of the pattern which has quickly grown into popularity and widespread usage.

I assume that one of the reasons this pattern hadn't popped up in this form earlier (and why it deserves distinction from other patterns) is that prior to touchscreen smartphones, UI design was not nearly as often constrained to fixed-size fullscreen.  Because of this new constraint, the concept of the main content temporarily sliding off the screen and the modal nature of the menu were deemed necessary, and out of that grew the benefits of hiding unnecessary visual clutter and providing a menu that can be any length without redesign.  It probably also helped that Apple's UIToolbar approach of a “More” button only half-solved a brewing problem.


The first place I remember seeing a sidebar drawer of this kind was in the now-defunct Tweetie app for iPad. webOS has also had drawers like this for quite a while, but I don't think either employ(ed) the “hamburger” button nor fixed-width draw size. I have no definite answer for you on this one, but the. number. of. open. source. libraries. for. making. these. kind. of. sidebar. menus. on GitHub seem to all point to the Facebook iOS app, as you've mentioned, and Path.

I suppose Facebook/Path-Style Sidebar/Menu/Drawer could be considered a going term for it, though I predict the references to company names will antique the term before too long.

share|improve this answer
4  
I can't say I've ever heard of it referred to as a hamburger menu before. Where have you seen this before? –  JonW Jan 14 '13 at 9:23
8  
If it is indeed called the hamburger drawer.. I think this is my new favorite name for a UX device. –  Kyle Sevenoaks Jan 14 '13 at 9:27
10  
Interestingly, Google Chrome calls that button a hotdog . –  Brian Jan 14 '13 at 14:16
5  
@Brian: The Meat-Or-Meatlike-Product-In-A-Bun Menu –  Slipp D. Thompson Apr 17 '13 at 22:07
3  
Technically, the "hamburger" terminology refers to the specific three bars icon that resembles a big mac, not necessarily the sidebar drawer execution of the menu itself. As you can see from the OPs screenshots, the sidebar drawer implementation has been successfully executed without the hamberger icon, using instead things like an arrow, etc. –  Joel Glovier May 16 '13 at 18:35

Side panel As mentioned at appadvice

The app features a pretty slick interface, and uses the side panel for navigation.

share|improve this answer
1  
+1, I've only ever heard "side panel" and "side menu" before... –  Izkata Jan 14 '13 at 16:04
    
I would say that “side panel” and “side menu” refer a panel/menu on the side, not the whole concept of content sliding away with a tap or drag to reveal a side panel/menu. That is to say — IMHO — a side panel/menu is a much more established and generalized UI concept, which is used as a part of this specific combination of elements that has come into vogue recently. So that would make AppAdvice not incorrect, just unspecific. –  Slipp D. Thompson Apr 17 '13 at 22:04

The layout pattern itself (not the burger icon) is known as 'Off Canvas'. Luke Wroblewski wrote about it in an article about Multi-Device Layout Patterns.

...the Off Canvas pattern for multi-device layout takes advantage of space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it. This pattern is showing up in a few separate mobile Web site designs and native mobile applications.

It has been implemented in frameworks like Zurb Foundation.

If you've used Facebook's iPhone app (or Path, or any number of apps that now follow this convention) then you've seen an off canvas panel in a native app. You hit a button and a panel slides in from the left (or depending on how you look at it, the main panel slides out of the way).

And covered in articles such as Off The Beaten Canvas: Exploring The Potential Of The Off-Canvas Pattern by Smashing Magazine:

The off-canvas flyout menu has taken over as the primary navigation pattern for mobile layouts — even some desktop layouts have jumped on board. And for good reason: An off-canvas menu is a great way to maintain context while giving the user a lot of additional information.

share|improve this answer

According to the android developer site it's known as a Navigation Drawer.

source: http://developer.android.com/training/implementing-navigation/nav-drawer.html

share|improve this answer
2  
That link is about implementing the drawer; from UX perspective this may be more interesting: Navigation Drawer in Android design guide –  Jonik Jan 6 at 12:59

Out of a related discussion which started on Quora, Geoff Alday dug a little deeper into the origins of the icon itself and discovered that Norm Cox is the man credited with designing the icon for the Xerox Star personal workstation, which was introduced in 1981.

In an e-mail conversation between Cox and Alday, Cox reveals how the icon came about and the design constraints they were working under. While today the icon is lovingly referred to as the hamburger icon, Cox reveals Xerox's own inside joke for the icon;

We used to tell potential users that the image was an "air vent" to keep the window cool.

share|improve this answer

Side Navigation is one proposed term, as stated here: http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html

It's a worth-while reading, which explains why this bring innovation to the navigation mechanisms of apps.

It also lists other candidate terms:

  • Fly-in app menu
  • Slide out navigation
  • Sliding navigation bar
  • Slide menu
share|improve this answer

This would be called a "Hamburger Menu."

Avid Media Composer (a professional video editing suite that hasn't changed it's UI for literally decades) has menus that have a similar icon that they call "hamburger menus." It's possible that this is the origin of the name.

share|improve this answer
1  
Technically the "hamburger" terminology refers to a specific style of menu icon that resembles the hamburger in a bun, not necessarily to the sliding sidebar drawer implementation of the menu. In fact, even in the OPs screenshots there is actually no hamberger icon used. –  Joel Glovier May 16 '13 at 18:37
    
Bottommost screenshot (YouTube on iPad). It's there. –  Slipp D. Thompson Apr 11 at 2:21

I've heard both hamburger menu and fly-out menu. In my work environment in Austin, fly-out menu is the most commonly used term.

share|improve this answer

To expound on what @matt_d_rat wrote,

There's a great write-up here about this, but it was originally designed by Norm Cox for the Xerox Star workstation in 1981! This icon is about as old as the concept of GUI itself!

To see it in action check out this video and skip to around 21 minutes.

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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