the Off Canvas pattern for multi-device layout takes advantage of Luke Wroblewski wrote about it in an article about Multi-Device Layout Patterns. The layout pattern itself (not the burger icon) is known as ' Off Canvas'. I suppose Facebook/Path-Style Sidebar/Menu/Drawer could be considered a going term for it, though I predict the references to company names would antiquate that before too long. on GitHub seem to all point to the Facebook iOS app as you've mentioned, and to Path. I have no definite answer for you on this one, but the. webOS has also had drawers like this for quite a while, but I don't think either employed the вЂњhamburgerвЂќ button nor fixed-width drawer size. The first place I remember seeing a sidebar drawer of this kind was in the now-defunct Tweetie app for iPad. It probably also helped that Apple's UIToolbar approach of a вЂњMoreвЂќ button only half-solved a brewing problem. 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. 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, the above points describe the idealized and common form of the pattern which has quickly grown into popularity and widespread usage.

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.

The activation button is always visible, and featured in the вЂњnavigationвЂќ header/footer immediately next to the side the drawer will appear on.

Tapping back on the partially-visible main content area closes the drawer,.

The drawer content is meta content intended for temporary access (navigation buttons, chat contact list, etc.),.

The main content slides out of the way or remains visually underneath, revealing the drawer by button tap or drag,.

This pattern is then best described as the combination of the drawer menu and reveal/hide button patterns in a manner where: 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.

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). Hamburger Drawer and Hamburger Sidebar would also be recognizable terms to the UX community.ДЄ bit of discussion on what I believe to be the proper usage of the term: I believe the going name for it is a Hamburger Menu, as a reference to the icon that's commonly used for it (, similar to the Unicode character в‰Ў U+2261 Identical To), and to the stacked nature of the items in the drawer.

What is slideshare app