{"id":229300,"date":"2021-04-17T13:40:39","date_gmt":"2021-04-17T10:40:39","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-a-hamburger-menu-button\/"},"modified":"2021-04-17T13:40:39","modified_gmt":"2021-04-17T10:40:39","slug":"what-is-a-hamburger-menu-button","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-a-hamburger-menu-button\/","title":{"rendered":"#What Is a Hamburger Menu Button?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6aec212da3923\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6aec212da3923\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-hamburger-menu-button\/#The_History_of_the_Hamburger_Icon\" >The History of the Hamburger Icon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-hamburger-menu-button\/#What_Is_the_Hamburger_Icon_for\" >What Is the Hamburger Icon for?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-hamburger-menu-button\/#Why_Is_It_Called_a_%E2%80%9CHamburger%E2%80%9D_Menu\" >Why Is It Called a \u201cHamburger\u201d Menu?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-hamburger-menu-button\/#The_Case_Against_the_Hamburger_Menu\" >The Case Against the Hamburger Menu<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Is a Hamburger Menu Button?&#8221;<\/strong><\/p>\n<div>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-720215\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/hamburger-button-hero.png?width=1200&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"humber button and emoji\" width=\"650\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Hamburger Menu\u2014or Hamburger Icon\u2014is a term commonly used when talking about <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>s. It might make you hungry, but it has nothing to do with food. Where did this silly name come from, and what does the menu do?<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"The_History_of_the_Hamburger_Icon\"><\/span>The History of the Hamburger Icon<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Hamburger icon\u2014menu, symbol, button, etc.\u2014has been around since 1981. It was created by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Norm_Cox_(designer)\">Norm Cox<\/a>, the graphics lead for the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Xerox_Star\">Xerox Star<\/a>, the first commercial personal computer.<\/p>\n<p>Norm designed the symbol as a container for menu choices. The horizontal lines are an abstract depiction of a vertical list. You can see the hamburger menu buttons in action on the Xerox Star in the video below at the 21:15 mark.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/61556918?dnt=1&amp;app_id=122963\" width=\"640\" height=\"428\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen=\"\" title=\"all-the-widgets\"><\/iframe><\/p>\n<p>The symbol was meant to be very simple, partly due to the design constraints of the time. It could only be around 16\u00d716 pixels, so it needed to be distinct and easily visible. Three bold lines accomplished that goal.<\/p>\n<p>It wasn\u2019t until smartphones and mobile apps came around that the hamburger icon exploded into mainstream consciousness. Limited screen space means that options need to be tucked away into menus, and the hamburger icon has become a popular choice to signify that.<\/p>\n<p>The history of the hamburger icon in mobile apps is a little murkier. It may have first been used by a <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">Twitter<\/a> app called <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blog.placeit.net\/history-of-the-hamburger-icon\/\">\u201cTweetie\u201d in 2008<\/a>. Soon after that, it started showing up in Apple\u2019s iOS operating system for the iPhone, which most likely led to its popularity in mobile app design.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Is_the_Hamburger_Icon_for\"><\/span>What Is the Hamburger Icon for?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As previously mentioned, the original purpose of the hamburger icon was to act as a menu that contained lists of options. That\u2019s where the design comes from. Menus typically include options in a vertical list, hence the three lines stacked on top of each other.<\/p>\n<p>That\u2019s still what the hamburger icon is used for today, but its purpose has expanded in mobile apps. It\u2019s now commonly used for menus that slide out from the side of the screen. (This type of menu is sometimes called a \u201csidebar\u201d menu.)<\/p>\n<p>Here\u2019s an example of the hamburger icon being used in the Gmail app for Android. Tapping the icon opens a menu from that side of the screen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-720251\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/2021-03-24_12-43-31.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"hamburger menu in gmail\" width=\"651\" height=\"230\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>The hamburger icon can also be found in the Windows 10 Start Menu. Hovering over or clicking the icon expands the shortcuts for Settings, Power, and other user options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-720252\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/2021-03-24_12-48-38.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"hamburger icon in the start menu\" width=\"650\" height=\"408\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>The hamburger icon is simply a symbol that has come to mean \u201cmenu.\u201d Once you start looking for it, you\u2019ll see it everywhere.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Why_Is_It_Called_a_%E2%80%9CHamburger%E2%80%9D_Menu\"><\/span>Why Is It Called a \u201cHamburger\u201d Menu?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-720249\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/hamburger-button-emoji.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"hamburger icon and hamburger\" width=\"650\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Thanks to the research of designer <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.evernote.com\/shard\/s207\/client\/snv?noteGuid=022f2237-4b4f-4096-87f2-053acd228c2d&amp;noteKey=ede2672bc3f39a1b0232f84e01ca0a83&amp;utm_campaign=buffer&amp;utm_medium=social&amp;sn=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs207%2Fsh%2F022f2237-4b4f-4096-87f2-053acd228c2d%2Fede2672bc3f39a1b0232f84e01ca0a83&amp;title=The%2Borigin%2Bof%2Bthe%2Bhamburger%2Bicon&amp;utm_content=buffer84840&amp;utm_source=twitter.com\">Geoff Alday<\/a>, the history of the hamburger icon is pretty fleshed out. However, we don\u2019t really know why or when it picked up the \u201chamburger\u201d nickname.<\/p>\n<p>Everyone seems to agree that the nickname comes from the three lines that somewhat resemble a top bun, burger pattie, and bottom bun. But who was the first person to make that connection? We\u2019re not sure. Norm Cox only mentions jokingly calling it an \u201cair vent\u201d for the window.<\/p>\n<p>Humans just see food in a lot of things, apparently.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"The_Case_Against_the_Hamburger_Menu\"><\/span>The Case Against the Hamburger Menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Not everyone is a fan of the ubiquitous hamburger icon. In recent years, app designers have started moving away from it.<\/p>\n<p>The hamburger icon was designed (with strict restraints in place) to be super simple. That simplicity can sometimes be a drawback. It\u2019s not very descriptive and can easily be overlooked if you\u2019re not familiar with it.<\/p>\n<p>Navigation bars have become a more popular way to organize menu items. Rather than tucking everything behind a non-descript button, multiple icons can be arranged on a bar with text. This is much easier for someone to understand.<\/p>\n<figure style=\"width: 452px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-720253\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/2021-03-24_12-59-11.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"google maps nav bar\" width=\"452\" height=\"127\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><figcaption class=\"wp-caption-text\">Navigation Bar in Google Maps<\/figcaption><\/figure>\n<p>A navigation bar doesn\u2019t work for every app, though, so it\u2019s still common to see the hamburger icon. What has become even more popular is the use of three dots as a menu icon, as shown below in Chrome for Android.<\/p>\n<p>(Below the button, you can see a hamburger menu icon on How-To Geek\u2019s mobile website. Websites often use this design, too!)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-720255\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/2021-03-24_13-05-27.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"three-dot menu icon\" width=\"450\" height=\"148\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<hr\/>\n<p>That\u2019s a lot of talk about hamburgers and software design. All you need to know is that a hamburger menu is typically three horizontal lines in a vertical stack. Be on the lookout for three dots as well. Use these buttons when you\u2019re looking for menus and more options. Now, pass the mustard, please.<\/p>\n<\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.howtogeek.com\/720214\/what-is-a-hamburger-menu-button\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Is a Hamburger Menu Button?&#8221; Hamburger Menu\u2014or Hamburger Icon\u2014is a term commonly used when talking about apps. It might make you hungry, but it has nothing to do with food. Where did this silly name come from, and what does the menu do? The History of the Hamburger Icon The Hamburger icon\u2014menu, symbol, button,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":229301,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/hamburger-button-hero.png?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-229300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/229300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=229300"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/229300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/229301"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=229300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=229300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=229300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}