Three line menu? Navicon? Drawer? Menu Icon? Side Swipe? Three stripes? Hamburger? [closed]

Question

During a design meeting the question came up "What is the name of the component with three horizontal lines?" It's common in mobile apps and mobile web, visualizing something to swipe. Googling the subject it seems Navicon or Drawer are used often, though I also see Side Swipe and even Hamburger. Trying to arrive at a consensus...

Henleyonthames

Does it need a title? If you refer to it as the three line navigation icon I'm sure most people will understand what you're talking about. If they don't, then a special name would be lost on them also. – Sandal

That's a good point. My intent is to understand and list what other names/titles the component may go by and possibly draw a consensus. Personally I prefer a standard shorthand name like drawer. – Henleyonthames

I also think it needs a name. Try to have a conversation about a thing that you don't know what's called? Then try that many times a day. – Meingoldas

There doesn't seem to be an official name so I vote for "hamburger". It's fun and memorable so I think it would catch on easily. I was able to get my clients to use the term. They saw the resemblance right away. Now we are always talking about hamburgers. – Craigcraighead

@Sandal to make a vague parallel, wouldn't it be sufficient if variables in a programming language were all anonymous or came with an obfuscated name via the blessing of some nice tool, or a name-case-randomizer... – Easting

I got here from searching "proposal to name menu 3 line icon as 'menu drawer'. I completely support naming it "menu drawer". I think it's a simple, common term that fits the visual appearance as well as function perfectly! For "people that wouldn't know the reference", they will pick up on it quickly enough -- just like "lol", "facebook timeline", "tweets", "emoticon", etc – Rozanne

Related, see Is Apple's or Google's meaning of the three-horizontal-bar icon more popular? on User Experience Stack Exchange. – Gladdie

Answer 1

Earliest reference has the name as Menu Button as created by Norm Cox and Xerox circa 1990...

http://vimeo.com/61556918

http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787

Henleyonthames

Answer 2

I think the best candidate is "Three Horizontal Lines".

Take a look at this post they did a brief history of it's usage: http://mobile.smashingmagazine.com/2012/10/08/the-semantic-responsive-design-navicon/

Meingoldas

there is a graphicdesign.stackexchange.com - it would be nice if programmers and designers would use the same name. in mine opinion it should be a consensus but designer causes would be given a slight priority. – Easting

well, actually, probably ux.stackexchange.com would be even more fitting – Easting

... So this question can be moved if that's ok... – Meingoldas

Answer 3

I think it should be "THL navicon" as its abreviation to three horizontal lines and easier for spoken language. But its already known as the hamburger or drawer menu.

Breadthways

Answer 4

Name of the three line icon to display the main menu of an andriod app is Navigation Drawer.we can use any icon for that.

Succumb

Answer 5

I think the best is three Horizontal Lines with effect animation to show the menu

If we talk about web applications with css and javascript it is very easy to implement.

You can use the following jquery plugin: https://www.articlage.com/adrianillo/article/HamburgerMenu

Just add the following element to your HTML code:

<div id="hamburgerMenu"></div>

And run the following javascript:

$("#hamburgerMenu").hamburgerMenu({ mainContent: 'mainContent',

         }, [
             {"id":"Brain","href":"index.html","text":"Pinky"},
             {"id":"Spongebob","href":"Spongebob.html","text":"Sponge Bob"},
             {"id":"Ghostbusters","href":"Ghostbusters.html","text":"Ghostbusters"},
             {"id":"fraggle","href":"other.html","text":"Fraggle rock"}
         ]
 );

Try a demo here: https://db.tt/FQP2dv7Y

Twitt

Answer 6

I was wondering this myself... I didn't know so I just wound up calling it the "tri-bar" at work one day, and it seems to have stuck with my coworkers (without jest). Pronouncing it like "triangle" or "tricycle", admittedly my inspiration was the Celtic triskele (pronounced more like "miss" than "my").

Mhd

Answer 7

<div id="lines"></div>

CSS

#lines { 
    border-bottom: 17px double black; 
    border-top: 6px solid black; 
    content:"";
    height: 5px; 
    width:30px;
}

result:

Tedtedd

Answer 8

Call it the ... Collapsed Menu.

Simple & to the point; easily understood by admins or users.

It is what it is!

;-)

Smallscale