What is this side menu called that can be found in many multi-touch apps, and where does it originate from?

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

    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

    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: http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/?utm_source=t.co&;utm_content=UX%20designers:%20Side%20drawer%20navigation%20could%20be%20costing%20you%20half%20your%20user%20engagement&utm_campaign=share%20button&awesm=tnw.to_t3K1z&utm_medium=referral

    @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.

    @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.

    It is called the Menu Navigation Icon, referred to as the Navicon.

    @BigMac Do you have a source for that?

    It's alternatively called the **Hotdog menu**

  • 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 items in the drawer. 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 or remains visually underneath, revealing 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 employed the “hamburger” button nor fixed-width drawer 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 to 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 would antiquate that before too long.

    I can't say I've ever heard of it referred to as a hamburger menu before. Where have you seen this before?

    If it is indeed called the hamburger drawer.. I think this is my new favorite name for a UX device.

    @JonW: I picked up on the name from a short article at The Industry (http://theindustry.cc/2013/01/07/13-design-trends-for-2013/) by a Gannon **Burgett** _(imagine that)_. Though he references good ol' Marco Arment, and Marco has used the term before (https://twitter.com/marcoarment/status/274003293473218561 or http://cl.ly/M9kD/), so maybe he coined it.

    Interestingly, Google Chrome calls that button a hotdog .

    @Brian: **The Meat-Or-Meatlike-Product-In-A-Bun Menu**

    @slipp-d-thompson I think Mark Kawano just beat Marco to it in this tweet. Mark talks about it in this Iterate podcast.

    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.

    @JoelGlovier I think there's a number of ways to look at it.  There's the icon itself, which strangely is horizontal lines not vertical lines like the resize/gripper buttons of yore.  Then there's the stacked nature of the menu, like a super-tall burger.  And then there's the layered feel of the screen, like one is sliding off the top bun to reveal what's inside.  None of these concisely say “hamburger” or “hotdog”, but with the union of these interpretations (and perhaps others), the name seems to have stuck.

    The inclusion of the menu as the default in Bootstrap really launched the feature.

    I just have to say that I hate this name. It should be drowned into non-memory with copious single-malt

    @NewAlexandria If I ever chance upon a new UI concept to coin, I'm going to think of you and seriously consider naming it **The Single-Malt Menu/Button/Bar/Indicator/Widget/etc**.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used