CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Hamburger button - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"698157e3-7b82-46a9-bb00-46ad66f8072c","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Hamburger_button","wgTitle":"Hamburger button","wgCurRevisionId":1258819070,"wgRevisionId":1258819070,"wgArticleId":47631552,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Articles with short description","Short description matches Wikidata","Pages using multiple image with auto scaled images","Graphical control elements"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Hamburger_button","wgRelevantArticleId":47631552,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia", "wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":10000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q21306238","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false, "wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","mediawiki.page.media","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader", "ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="1200"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/800px-Hamburger_icon.svg.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="800"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/640px-Hamburger_icon.svg.png"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="640"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Hamburger button - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/Hamburger_button"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Hamburger_button&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/Hamburger_button"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Hamburger_button rootpage-Hamburger_button skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Hamburger+button" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Hamburger+button" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Hamburger+button" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Hamburger+button" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-History" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#History"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>History</span> </div> </a> <ul id="toc-History-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Appearance_and_functionality" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Appearance_and_functionality"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Appearance and functionality</span> </div> </a> <ul id="toc-Appearance_and_functionality-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Reception" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Reception"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Reception</span> </div> </a> <ul id="toc-Reception-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Hamburger button</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 19 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-19" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">19 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D8%B2%D8%B1_%D8%A7%D9%84%D9%87%D9%85%D8%A8%D8%B1%D8%BA%D8%B1" title="زر الهمبرغر – Arabic" lang="ar" hreflang="ar" data-title="زر الهمبرغر" data-language-autonym="العربية" data-language-local-name="Arabic" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-az mw-list-item"><a href="https://az.wikipedia.org/wiki/Hamburger_d%C3%BCym%C9%99si" title="Hamburger düyməsi – Azerbaijani" lang="az" hreflang="az" data-title="Hamburger düyməsi" data-language-autonym="Azərbaycanca" data-language-local-name="Azerbaijani" class="interlanguage-link-target"><span>Azərbaycanca</span></a></li><li class="interlanguage-link interwiki-be mw-list-item"><a href="https://be.wikipedia.org/wiki/%D0%93%D0%B0%D0%BC%D0%B1%D1%83%D1%80%D0%B3%D0%B5%D1%80_(%D0%B0%D0%B1%D1%80%D0%B0%D0%B7%D0%BE%D0%BA)" title="Гамбургер (абразок) – Belarusian" lang="be" hreflang="be" data-title="Гамбургер (абразок)" data-language-autonym="Беларуская" data-language-local-name="Belarusian" class="interlanguage-link-target"><span>Беларуская</span></a></li><li class="interlanguage-link interwiki-ca mw-list-item"><a href="https://ca.wikipedia.org/wiki/Bot%C3%B3_de_men%C3%BA" title="Botó de menú – Catalan" lang="ca" hreflang="ca" data-title="Botó de menú" data-language-autonym="Català" data-language-local-name="Catalan" class="interlanguage-link-target"><span>Català</span></a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Hamburger-Men%C3%BC-Icon" title="Hamburger-Menü-Icon – German" lang="de" hreflang="de" data-title="Hamburger-Menü-Icon" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikipedia.org/wiki/Bot%C3%B3n_de_hamburguesa" title="Botón de hamburguesa – Spanish" lang="es" hreflang="es" data-title="Botón de hamburguesa" data-language-autonym="Español" data-language-local-name="Spanish" class="interlanguage-link-target"><span>Español</span></a></li><li class="interlanguage-link interwiki-fa mw-list-item"><a href="https://fa.wikipedia.org/wiki/%D8%AF%DA%A9%D9%85%D9%87_%D9%87%D9%85%D8%A8%D8%B1%DA%AF%D8%B1%DB%8C" title="دکمه همبرگری – Persian" lang="fa" hreflang="fa" data-title="دکمه همبرگری" data-language-autonym="فارسی" data-language-local-name="Persian" class="interlanguage-link-target"><span>فارسی</span></a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/Menu_lat%C3%A9ral" title="Menu latéral – French" lang="fr" hreflang="fr" data-title="Menu latéral" data-language-autonym="Français" data-language-local-name="French" class="interlanguage-link-target"><span>Français</span></a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0_%EB%B2%84%ED%8A%BC" title="햄버거 버튼 – Korean" lang="ko" hreflang="ko" data-title="햄버거 버튼" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-lt mw-list-item"><a href="https://lt.wikipedia.org/wiki/Hamburgerio_meniu" title="Hamburgerio meniu – Lithuanian" lang="lt" hreflang="lt" data-title="Hamburgerio meniu" data-language-autonym="Lietuvių" data-language-local-name="Lithuanian" class="interlanguage-link-target"><span>Lietuvių</span></a></li><li class="interlanguage-link interwiki-ms mw-list-item"><a href="https://ms.wikipedia.org/wiki/Butang_hamburger" title="Butang hamburger – Malay" lang="ms" hreflang="ms" data-title="Butang hamburger" data-language-autonym="Bahasa Melayu" data-language-local-name="Malay" class="interlanguage-link-target"><span>Bahasa Melayu</span></a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3" title="ハンバーガーボタン – Japanese" lang="ja" hreflang="ja" data-title="ハンバーガーボタン" data-language-autonym="日本語" data-language-local-name="Japanese" class="interlanguage-link-target"><span>日本語</span></a></li><li class="interlanguage-link interwiki-no mw-list-item"><a href="https://no.wikipedia.org/wiki/Hamburgermeny" title="Hamburgermeny – Norwegian Bokmål" lang="nb" hreflang="nb" data-title="Hamburgermeny" data-language-autonym="Norsk bokmål" data-language-local-name="Norwegian Bokmål" class="interlanguage-link-target"><span>Norsk bokmål</span></a></li><li class="interlanguage-link interwiki-pl mw-list-item"><a href="https://pl.wikipedia.org/wiki/Hamburger_menu" title="Hamburger menu – Polish" lang="pl" hreflang="pl" data-title="Hamburger menu" data-language-autonym="Polski" data-language-local-name="Polish" class="interlanguage-link-target"><span>Polski</span></a></li><li class="interlanguage-link interwiki-ru badge-Q17559452 badge-recommendedarticle mw-list-item" title="recommended article"><a href="https://ru.wikipedia.org/wiki/%D0%93%D0%B0%D0%BC%D0%B1%D1%83%D1%80%D0%B3%D0%B5%D1%80_(%D0%B8%D0%BA%D0%BE%D0%BD%D0%BA%D0%B0)" title="Гамбургер (иконка) – Russian" lang="ru" hreflang="ru" data-title="Гамбургер (иконка)" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-fi mw-list-item"><a href="https://fi.wikipedia.org/wiki/Hampurilaisvalikko" title="Hampurilaisvalikko – Finnish" lang="fi" hreflang="fi" data-title="Hampurilaisvalikko" data-language-autonym="Suomi" data-language-local-name="Finnish" class="interlanguage-link-target"><span>Suomi</span></a></li><li class="interlanguage-link interwiki-th mw-list-item"><a href="https://th.wikipedia.org/wiki/%E0%B8%9B%E0%B8%B8%E0%B9%88%E0%B8%A1%E0%B9%81%E0%B8%AE%E0%B8%A1%E0%B9%80%E0%B8%9A%E0%B8%AD%E0%B8%A3%E0%B9%8C%E0%B9%80%E0%B8%81%E0%B8%AD%E0%B8%A3%E0%B9%8C" title="ปุ่มแฮมเบอร์เกอร์ – Thai" lang="th" hreflang="th" data-title="ปุ่มแฮมเบอร์เกอร์" data-language-autonym="ไทย" data-language-local-name="Thai" class="interlanguage-link-target"><span>ไทย</span></a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/%D0%93%D0%B0%D0%BC%D0%B1%D1%83%D1%80%D0%B3%D0%B5%D1%80_(%D1%96%D0%BA%D0%BE%D0%BD%D0%BA%D0%B0)" title="Гамбургер (іконка) – Ukrainian" lang="uk" hreflang="uk" data-title="Гамбургер (іконка)" data-language-autonym="Українська" data-language-local-name="Ukrainian" class="interlanguage-link-target"><span>Українська</span></a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/%E6%BC%A2%E5%A0%A1%E9%81%B8%E5%96%AE" title="漢堡選單 – Chinese" lang="zh" hreflang="zh" data-title="漢堡選單" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target"><span>中文</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q21306238#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Hamburger_button" title="View the content page [c]" accesskey="c"><span>Article</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Hamburger_button" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Hamburger_button"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Hamburger_button&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Hamburger_button&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Hamburger_button"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Hamburger_button&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Hamburger_button&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Hamburger_button" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Hamburger_button" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Hamburger_button&oldid=1258819070" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Hamburger_button&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Hamburger_button&id=1258819070&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHamburger_button"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHamburger_button"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Hamburger_button&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Hamburger_button&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-commons mw-list-item"><a href="https://commons.wikimedia.org/wiki/Category:Hamburger_menu_icon" hreflang="en"><span>Wikimedia Commons</span></a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q21306238" title="Structured data on this page hosted by Wikidata [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">User interface element</div> <style data-mw-deduplicate="TemplateStyles:r1237032888/mw-parser-output/.tmulti">.mw-parser-output .tmulti .multiimageinner{display:flex;flex-direction:column}.mw-parser-output .tmulti .trow{display:flex;flex-direction:row;clear:left;flex-wrap:wrap;width:100%;box-sizing:border-box}.mw-parser-output .tmulti .tsingle{margin:1px;float:left}.mw-parser-output .tmulti .theader{clear:both;font-weight:bold;text-align:center;align-self:center;background-color:transparent;width:100%}.mw-parser-output .tmulti .thumbcaption{background-color:transparent}.mw-parser-output .tmulti .text-align-left{text-align:left}.mw-parser-output .tmulti .text-align-right{text-align:right}.mw-parser-output .tmulti .text-align-center{text-align:center}@media all and (max-width:720px){.mw-parser-output .tmulti .thumbinner{width:100%!important;box-sizing:border-box;max-width:none!important;align-items:center}.mw-parser-output .tmulti .trow{justify-content:center}.mw-parser-output .tmulti .tsingle{float:none!important;max-width:100%!important;box-sizing:border-box;text-align:center}.mw-parser-output .tmulti .tsingle .thumbcaption{text-align:left}.mw-parser-output .tmulti .trow>.thumbcaption{text-align:center}}@media screen{html.skin-theme-clientpref-night .mw-parser-output .tmulti .multiimageinner img{background-color:white}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .tmulti .multiimageinner img{background-color:white}}</style><div class="thumb tmulti tright"><div class="thumbinner multiimageinner" style="width:293px;max-width:293px"><div class="trow"><div class="tsingle" style="margin-right:10px;width:140px;max-width:140px"><div class="thumbimage" style="height:137px;overflow:hidden"><span typeof="mw:File"><a href="/wiki/File:Hamburger_icon.svg" class="mw-file-description"><img alt="An icon of three lines" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/138px-Hamburger_icon.svg.png" decoding="async" width="138" height="138" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/207px-Hamburger_icon.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/276px-Hamburger_icon.svg.png 2x" data-file-width="32" data-file-height="32" /></a></span></div><div class="thumbcaption">Collapsed menu icon used on the <i>Hamburger Button</i></div></div><div class="tsingle" style="width:140px;max-width:140px"><div class="thumbimage" style="height:137px;overflow:hidden"><span typeof="mw:File"><a href="/wiki/File:HAMBURGERMENU.png" class="mw-file-description"><img alt="A picture of a hamburger with three buns" src="//upload.wikimedia.org/wikipedia/commons/thumb/2/27/HAMBURGERMENU.png/138px-HAMBURGERMENU.png" decoding="async" width="138" height="138" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/27/HAMBURGERMENU.png/207px-HAMBURGERMENU.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/27/HAMBURGERMENU.png/276px-HAMBURGERMENU.png 2x" data-file-width="1000" data-file-height="1000" /></a></span></div><div class="thumbcaption">A hamburger, the origin of the <a href="/wiki/Nickname" title="Nickname">nickname</a></div></div></div></div></div> <p>The <b>hamburger button</b> (the <a href="/wiki/Triple_bar" title="Triple bar">triple bar</a> ≡ or <a href="/wiki/Bagua" title="Bagua">trigram symbol</a> ☰), so named for its unintentional resemblance to a <a href="/wiki/Hamburger" title="Hamburger">hamburger</a>, is a <a href="/wiki/Button_(computing)" title="Button (computing)">button</a> typically placed in a top corner of a <a href="/wiki/Graphical_user_interface" title="Graphical user interface">graphical user interface</a>.<sup id="cite_ref-W3s-howto_1-0" class="reference"><a href="#cite_note-W3s-howto-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> Its function is to toggle a menu (sometimes referred to as a <b>hamburger menu</b>) or <a href="/wiki/Navigation_bar" title="Navigation bar">navigation bar</a> between being collapsed behind the button or displayed on the screen. The icon which is associated with this <a href="/wiki/Widget_(GUI)" class="mw-redirect" title="Widget (GUI)">widget</a>, consisting of three horizontal bars, is also known as the <i>collapsed menu icon</i>. </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="History">History</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Hamburger_button&action=edit&section=1" title="Edit section: History"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1237032888/mw-parser-output/.tmulti"><div class="thumb tmulti tright"><div class="thumbinner multiimageinner" style="width:312px;max-width:312px"><div class="trow"><div class="tsingle" style="width:142px;max-width:142px"><div class="thumbimage" style="height:112px;overflow:hidden"><span typeof="mw:File"><a href="/wiki/File:Xerox_Star_8010_ViewPoint.jpg" class="mw-file-description"><img alt="Xerox Star computer interface" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Xerox_Star_8010_ViewPoint.jpg/140px-Xerox_Star_8010_ViewPoint.jpg" decoding="async" width="140" height="112" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Xerox_Star_8010_ViewPoint.jpg/210px-Xerox_Star_8010_ViewPoint.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Xerox_Star_8010_ViewPoint.jpg/280px-Xerox_Star_8010_ViewPoint.jpg 2x" data-file-width="1286" data-file-height="1032" /></a></span></div></div><div class="tsingle" style="width:166px;max-width:166px"><div class="thumbimage" style="height:112px;overflow:hidden"><span typeof="mw:File"><a href="/wiki/File:Microsoft_Windows_1.0_screenshot.png" class="mw-file-description"><img alt="Microsoft Windows 1.0 screenshot" src="//upload.wikimedia.org/wikipedia/commons/thumb/d/df/Microsoft_Windows_1.0_screenshot.png/164px-Microsoft_Windows_1.0_screenshot.png" decoding="async" width="164" height="113" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/df/Microsoft_Windows_1.0_screenshot.png/246px-Microsoft_Windows_1.0_screenshot.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/d/df/Microsoft_Windows_1.0_screenshot.png/328px-Microsoft_Windows_1.0_screenshot.png 2x" data-file-width="2384" data-file-height="1644" /></a></span></div></div></div><div class="trow" style="display:flex"><div class="thumbcaption">Early versions of the hamburger button can be seen in the 1980s graphical user interfaces of the <a href="/wiki/Xerox_Star" title="Xerox Star">Xerox Star</a> computer and Microsoft <a href="/wiki/Windows_1.0" title="Windows 1.0">Windows 1.0</a></div></div></div></div> <p>The icon was originally designed by <a href="/wiki/Norm_Cox_(designer)" title="Norm Cox (designer)">Norm Cox</a> as part of the user interface for the <a href="/wiki/Xerox_Star" title="Xerox Star">Xerox Star</a> personal computer, introduced in 1981.<sup id="cite_ref-Evernote-origin_2-0" class="reference"><a href="#cite_note-Evernote-origin-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> Cox described the icon's creation, saying, "Its graphic design was meant to be very 'road sign' simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13... can't remember exactly)."<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> </p><p>In possibly its first use after the Xerox Star, the release of <a href="/wiki/Windows_1.0" title="Windows 1.0">Windows 1.0</a> in 1985 contained a hamburger icon in each window's control menu.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> It was short-lived, however, as the hamburger icon disappeared in <a href="/wiki/Windows_2.0" title="Windows 2.0">Windows 2.0</a> in favor of a single horizontal line denoting the control menu. <a href="/wiki/Windows_95" title="Windows 95">Windows 95</a> replaced the single line with the program's icon,<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> and the hamburger would not return to Windows until a placement on the <a href="/wiki/Start_menu" title="Start menu">Start menu</a> of the <a href="/wiki/Windows_10_version_history#Version_1607_(Anniversary_Update)" title="Windows 10 version history">one-year update</a> of <a href="/wiki/Windows_10" title="Windows 10">Windows 10</a>.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> </p><p>Cox's hamburger icon saw a resurgence starting in 2009 stemming from the limited screen area available to <a href="/wiki/Mobile_app" title="Mobile app">mobile apps</a>.<sup id="cite_ref-Gizmodo_7-0" class="reference"><a href="#cite_note-Gizmodo-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-PlaceItHist_8-0" class="reference"><a href="#cite_note-PlaceItHist-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-Stuff_9-0" class="reference"><a href="#cite_note-Stuff-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup> </p><p>In 2024, <a href="/wiki/Mondelez_International" title="Mondelez International">Mondelez International</a> (the owner of the Oreo brand) publicly tried to encourage calling it an "<a href="/wiki/Oreo" title="Oreo">Oreo</a>" rather than "hamburger" menu.<sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="Appearance_and_functionality">Appearance and functionality</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Hamburger_button&action=edit&section=2" title="Edit section: Appearance and functionality"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Editing_Wikipedia_mobile_screenshot_p_16,_Penny_Cyclopaedia_with_menu.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Editing_Wikipedia_mobile_screenshot_p_16%2C_Penny_Cyclopaedia_with_menu.png/220px-Editing_Wikipedia_mobile_screenshot_p_16%2C_Penny_Cyclopaedia_with_menu.png" decoding="async" width="220" height="352" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Editing_Wikipedia_mobile_screenshot_p_16%2C_Penny_Cyclopaedia_with_menu.png/330px-Editing_Wikipedia_mobile_screenshot_p_16%2C_Penny_Cyclopaedia_with_menu.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Editing_Wikipedia_mobile_screenshot_p_16%2C_Penny_Cyclopaedia_with_menu.png/440px-Editing_Wikipedia_mobile_screenshot_p_16%2C_Penny_Cyclopaedia_with_menu.png 2x" data-file-width="1200" data-file-height="1920" /></a><figcaption>A hamburger menu in a previous version of the <a href="/wiki/List_of_Wikipedia_mobile_applications#Wikimedia_Foundation" title="List of Wikipedia mobile applications">Wikipedia mobile app</a></figcaption></figure> <p>The "menu" button takes the form of an <a href="/wiki/Icon_(computing)" title="Icon (computing)">icon</a> that consists of three parallel horizontal lines (displayed as <b>≡</b>), suggestive of a list.<sup id="cite_ref-Gizmodo_7-1" class="reference"><a href="#cite_note-Gizmodo-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> The name refers to its resemblance to the menu that is typically exposed or opened when interacting with it.<sup id="cite_ref-WSJ_20130318_12-0" class="reference"><a href="#cite_note-WSJ_20130318-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> The wider button may be reduced to three vertically stacked dots (displayed as a tri-colon or <a href="/wiki/Ellipsis" title="Ellipsis">vertical ellipsis</a> <b>⋮</b> ), also known as a <b>kebab icon</b>, <b>meatball icon</b> or <b>falafel icon</b>. In the <a href="/wiki/Microsoft" title="Microsoft">Microsoft</a> Office 365 platform, a similar application menu consisting of three rows of three squares is displayed, this is referred to as a "waffle".<sup id="cite_ref-TechR-365_13-0" class="reference"><a href="#cite_note-TechR-365-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup> Tapping, clicking or otherwise activating this button results in a <a href="/wiki/Menu_(computing)" title="Menu (computing)">menu</a> being revealed, which distinguishes it from a <a href="/wiki/Menu_bar" title="Menu bar">menu or tab bar</a> that is always on display.<sup id="cite_ref-TechCrunch_-_24_May_2014_-_Kill_The_Hamburger_Button_14-0" class="reference"><a href="#cite_note-TechCrunch_-_24_May_2014_-_Kill_The_Hamburger_Button-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="Reception">Reception</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Hamburger_button&action=edit&section=3" title="Edit section: Reception"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>It has been argued that while the collapsed menu button is now commonplace, its functionality is not necessarily immediately obvious when first encountered;<sup id="cite_ref-bbc-H-mystery_15-0" class="reference"><a href="#cite_note-bbc-H-mystery-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup> in particular, older users less familiar with modern iconography may find it confusing.<sup id="cite_ref-Loving_&_Hating_the_Hamburger_Icon_16-0" class="reference"><a href="#cite_note-Loving_&_Hating_the_Hamburger_Icon-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup> The location of the hamburger menu icon also depends on the specific website or app.<sup id="cite_ref-Hamburger_menu_icon:_should_it_be_on_the_left_or_right?_17-0" class="reference"><a href="#cite_note-Hamburger_menu_icon:_should_it_be_on_the_left_or_right?-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup> </p><p>The menu button may increase <a href="/wiki/Interaction_cost" title="Interaction cost">interaction cost</a> compared to a menu bar, requiring extra clicks to retrieve the same information, albeit with the benefit of less space usage of the screen.<sup id="cite_ref-Tsiodoulos_18-0" class="reference"><a href="#cite_note-Tsiodoulos-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> It has also been argued that designers tend to overload these icons with too much hidden information.<sup id="cite_ref-Loving_&_Hating_the_Hamburger_Icon_16-1" class="reference"><a href="#cite_note-Loving_&_Hating_the_Hamburger_Icon-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Hamburger_button&action=edit&section=4" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1235681985">.mw-parser-output .side-box{margin:4px 0;box-sizing:border-box;border:1px solid #aaa;font-size:88%;line-height:1.25em;background-color:var(--background-color-interactive-subtle,#f8f9fa);display:flow-root}.mw-parser-output .side-box-abovebelow,.mw-parser-output .side-box-text{padding:0.25em 0.9em}.mw-parser-output .side-box-image{padding:2px 0 2px 0.9em;text-align:center}.mw-parser-output .side-box-imageright{padding:2px 0.9em 2px 0;text-align:center}@media(min-width:500px){.mw-parser-output .side-box-flex{display:flex;align-items:center}.mw-parser-output .side-box-text{flex:1;min-width:0}}@media(min-width:720px){.mw-parser-output .side-box{width:238px}.mw-parser-output .side-box-right{clear:right;float:right;margin-left:1em}.mw-parser-output .side-box-left{margin-right:1em}}</style><style data-mw-deduplicate="TemplateStyles:r1237033735">@media print{body.ns-0 .mw-parser-output .sistersitebox{display:none!important}}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sistersitebox img[src*="Wiktionary-logo-en-v2.svg"]{background-color:white}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sistersitebox img[src*="Wiktionary-logo-en-v2.svg"]{background-color:white}}</style><div class="side-box side-box-right plainlinks sistersitebox"><style data-mw-deduplicate="TemplateStyles:r1126788409">.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}</style> <div class="side-box-flex"> <div class="side-box-image"><span class="noviewer" typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/99/Wiktionary-logo-en-v2.svg/40px-Wiktionary-logo-en-v2.svg.png" decoding="async" width="40" height="40" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/9/99/Wiktionary-logo-en-v2.svg/60px-Wiktionary-logo-en-v2.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/9/99/Wiktionary-logo-en-v2.svg/80px-Wiktionary-logo-en-v2.svg.png 2x" data-file-width="512" data-file-height="512" /></span></span></div> <div class="side-box-text plainlist">Look up <i><b><a href="https://en.wiktionary.org/wiki/hamburger_button" class="extiw" title="wiktionary:hamburger button">hamburger button</a></b></i> in Wiktionary, the free dictionary.</div></div> </div> <ul><li><a href="/wiki/Menu_key" title="Menu key">Menu key</a></li> <li><a href="/wiki/Triple_bar#Application_design" title="Triple bar">Triple bar § Application design</a></li> <li><a href="/wiki/Ellipsis#In_computer_user_interface" title="Ellipsis">Ellipsis § In computer user interface</a> – used to indicate "More", or partially hidden options whereas the collapsed menu icon signify completely hidden options</li></ul> <div class="mw-heading mw-heading2"><h2 id="References">References</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Hamburger_button&action=edit&section=5" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist reflist-columns references-column-width reflist-columns-2"> <ol class="references"> <li id="cite_note-W3s-howto-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-W3s-howto_1-0">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3schools.com/howto/howto_css_menu_icon.asp">"How To Create a Menu Icon"</a>. <i>w3schools.com</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20180905231557/https://www.w3schools.com/howto/howto_css_menu_icon.asp">Archived</a> from the original on 2018-09-05<span class="reference-accessdate">. Retrieved <span class="nowrap">2018-09-20</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=w3schools.com&rft.atitle=How+To+Create+a+Menu+Icon&rft_id=https%3A%2F%2Fwww.w3schools.com%2Fhowto%2Fhowto_css_menu_icon.asp&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-Evernote-origin-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-Evernote-origin_2-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83">"The origin of the hamburger icon"</a>. <i>evernote.com</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20151107060809/https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83">Archived</a> from the original on 2015-11-07<span class="reference-accessdate">. Retrieved <span class="nowrap">2018-09-20</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=evernote.com&rft.atitle=The+origin+of+the+hamburger+icon&rft_id=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs207%2Fsh%2F022f2237-4b4f-4096-87f2-053acd228c2d%2Fede2672bc3f39a1b0232f84e01ca0a83&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://blog.placeit.net/history-of-the-hamburger-icon/">"A Brief History of the Hamburger Icon"</a>. <i>Placeit Blog</i>. 2014-10-29<span class="reference-accessdate">. Retrieved <span class="nowrap">2019-02-23</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Placeit+Blog&rft.atitle=A+Brief+History+of+the+Hamburger+Icon&rft.date=2014-10-29&rft_id=https%3A%2F%2Fblog.placeit.net%2Fhistory-of-the-hamburger-icon%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFAli2015" class="citation web cs1">Ali, Fahad (2015-05-13). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20210401222227/https://www.windowschimp.com/microsoft-first-used-the-controversial-hamburger-menu-in-1985/">"Microsoft First Used The Controversial Hamburger Menu In 1985"</a>. <i>windowschimp.com</i>. Archived from <a rel="nofollow" class="external text" href="https://www.windowschimp.com/microsoft-first-used-the-controversial-hamburger-menu-in-1985/">the original</a> on 2021-04-01<span class="reference-accessdate">. Retrieved <span class="nowrap">2019-06-12</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=windowschimp.com&rft.atitle=Microsoft+First+Used+The+Controversial+Hamburger+Menu+In+1985&rft.date=2015-05-13&rft.aulast=Ali&rft.aufirst=Fahad&rft_id=https%3A%2F%2Fwww.windowschimp.com%2Fmicrosoft-first-used-the-controversial-hamburger-menu-in-1985%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFDoppelhammer" class="citation web cs1">Doppelhammer, Jim. <a rel="nofollow" class="external text" href="http://doublehammer.com/help/refwine1.htm#ControlMenu">"Windows Elements"</a>. <i>doublehammer.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-06-12</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=doublehammer.com&rft.atitle=Windows+Elements&rft.aulast=Doppelhammer&rft.aufirst=Jim&rft_id=http%3A%2F%2Fdoublehammer.com%2Fhelp%2Frefwine1.htm%23ControlMenu&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFShaikh2016" class="citation web cs1">Shaikh, Rafia (2016-04-04). <a rel="nofollow" class="external text" href="https://wccftech.com/the-new-hamburger-start-menu-for-windows-10/">"Here's How the New Windows 10 Anniversary Start Menu Looks Like"</a>. <i>wccftech.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-06-12</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=wccftech.com&rft.atitle=Here%27s+How+the+New+Windows+10+Anniversary+Start+Menu+Looks+Like&rft.date=2016-04-04&rft.aulast=Shaikh&rft.aufirst=Rafia&rft_id=https%3A%2F%2Fwccftech.com%2Fthe-new-hamburger-start-menu-for-windows-10%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-Gizmodo-7"><span class="mw-cite-backlink">^ <a href="#cite_ref-Gizmodo_7-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-Gizmodo_7-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFCampbell-Dollaghan2014" class="citation web cs1">Campbell-Dollaghan, Kelsey (March 31, 2014). <a rel="nofollow" class="external text" href="https://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787">"Who Designed the Hamburger Icon?"</a>. <a href="/wiki/Gizmodo" title="Gizmodo">Gizmodo</a>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20160206205739/http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787">Archived</a> from the original on 2016-02-06<span class="reference-accessdate">. Retrieved <span class="nowrap">February 2,</span> 2016</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Who+Designed+the+Hamburger+Icon%3F&rft.pub=Gizmodo&rft.date=2014-03-31&rft.aulast=Campbell-Dollaghan&rft.aufirst=Kelsey&rft_id=https%3A%2F%2Fgizmodo.com%2Fwho-designed-the-iconic-hamburger-icon-1555438787&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-PlaceItHist-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-PlaceItHist_8-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://blog.placeit.net/history-of-the-hamburger-icon/">"A Brief History of the Hamburger Icon"</a>. <i>placeit.net</i>. 29 October 2014. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20170202023133/https://blog.placeit.net/history-of-the-hamburger-icon/">Archived</a> from the original on 2017-02-02<span class="reference-accessdate">. Retrieved <span class="nowrap">25 January</span> 2017</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=placeit.net&rft.atitle=A+Brief+History+of+the+Hamburger+Icon&rft.date=2014-10-29&rft_id=https%3A%2F%2Fblog.placeit.net%2Fhistory-of-the-hamburger-icon%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-Stuff-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-Stuff_9-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://stuffandnonsense.co.uk/blog/we_need_a_standard_show_navigation_icon_for_responsive_web_design">"We need a standard show navigation icon for responsive web design"</a>. <i>Stuff & Nonsense</i>. 17 March 2012. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20180920161124/https://stuffandnonsense.co.uk/blog/we_need_a_standard_show_navigation_icon_for_responsive_web_design">Archived</a> from the original on 2018-09-20<span class="reference-accessdate">. Retrieved <span class="nowrap">2018-09-20</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Stuff+%26+Nonsense&rft.atitle=We+need+a+standard+show+navigation+icon+for+responsive+web+design&rft.date=2012-03-17&rft_id=https%3A%2F%2Fstuffandnonsense.co.uk%2Fblog%2Fwe_need_a_standard_show_navigation_icon_for_responsive_web_design&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFBerger2024" class="citation web cs1">Berger, Eric (2024-04-08). <a rel="nofollow" class="external text" href="https://www.campaignlive.com/article/oreo-claims-hamburger-menu-its-own/1868061">"Oreo claims the hamburger menu as its own"</a>. <i>campaignlive.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2024-04-15</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=campaignlive.com&rft.atitle=Oreo+claims+the+hamburger+menu+as+its+own&rft.date=2024-04-08&rft.aulast=Berger&rft.aufirst=Eric&rft_id=https%3A%2F%2Fwww.campaignlive.com%2Farticle%2Foreo-claims-hamburger-menu-its-own%2F1868061&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.thedrum.com/news/2024/04/09/oreo-craves-change-turns-internet-s-hamburger-menu-the-oreo-menu">"Oreo craves change, turns internet's 'hamburger menu' into 'The Oreo Menu'<span class="cs1-kern-right"></span>"</a>. <i>The Drum</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2024-04-15</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=The+Drum&rft.atitle=Oreo+craves+change%2C+turns+internet%E2%80%99s+%E2%80%98hamburger+menu%E2%80%99+into+%E2%80%98The+Oreo+Menu%E2%80%99&rft_id=https%3A%2F%2Fwww.thedrum.com%2Fnews%2F2024%2F04%2F09%2Foreo-craves-change-turns-internet-s-hamburger-menu-the-oreo-menu&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-WSJ_20130318-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-WSJ_20130318_12-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFLessin2013" class="citation news cs1">Lessin, Jessica (March 18, 2013). <a rel="nofollow" class="external text" href="https://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/">"What's a 'hamburger' button? A guide to app features"</a>. <i><a href="/wiki/The_Wall_Street_Journal" title="The Wall Street Journal">The Wall Street Journal</a></i>. <a href="/wiki/Dow_Jones_%26_Company" title="Dow Jones & Company">Dow Jones & Company</a>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20150416195303/http://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/">Archived</a> from the original on 2015-04-16<span class="reference-accessdate">. Retrieved <span class="nowrap">April 10,</span> 2015</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=The+Wall+Street+Journal&rft.atitle=What%27s+a+%27hamburger%27+button%3F+A+guide+to+app+features&rft.date=2013-03-18&rft.aulast=Lessin&rft.aufirst=Jessica&rft_id=https%3A%2F%2Fblogs.wsj.com%2Fdigits%2F2013%2F03%2F18%2Fwhats-a-hamburger-button-a-guide-to-app%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-TechR-365-13"><span class="mw-cite-backlink"><b><a href="#cite_ref-TechR-365_13-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFNguyen2015" class="citation web cs1">Nguyen, Chuong (June 26, 2015). <a rel="nofollow" class="external text" href="https://www.techradar.com/news/software/business-software/office-365-store-saves-time-with-single-sign-on-to-web-apps-1297871">"Office 365 Store saves time with single sign-on to web apps"</a>. <i>Tech Radar Pro</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20180209063726/http://www.techradar.com/news/software/business-software/office-365-store-saves-time-with-single-sign-on-to-web-apps-1297871">Archived</a> from the original on 2018-02-09<span class="reference-accessdate">. Retrieved <span class="nowrap">2018-02-08</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Tech+Radar+Pro&rft.atitle=Office+365+Store+saves+time+with+single+sign-on+to+web+apps&rft.date=2015-06-26&rft.aulast=Nguyen&rft.aufirst=Chuong&rft_id=https%3A%2F%2Fwww.techradar.com%2Fnews%2Fsoftware%2Fbusiness-software%2Foffice-365-store-saves-time-with-single-sign-on-to-web-apps-1297871&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-TechCrunch_-_24_May_2014_-_Kill_The_Hamburger_Button-14"><span class="mw-cite-backlink"><b><a href="#cite_ref-TechCrunch_-_24_May_2014_-_Kill_The_Hamburger_Button_14-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFConstine2014" class="citation web cs1">Constine, Josh (May 24, 2014). <a rel="nofollow" class="external text" href="https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/">"Kill the hamburger buttons"</a>. <i><a href="/wiki/TechCrunch" title="TechCrunch">TechCrunch</a></i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20160819092410/https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/">Archived</a> from the original on 2016-08-19<span class="reference-accessdate">. Retrieved <span class="nowrap">April 10,</span> 2015</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=TechCrunch&rft.atitle=Kill+the+hamburger+buttons&rft.date=2014-05-24&rft.aulast=Constine&rft.aufirst=Josh&rft_id=https%3A%2F%2Ftechcrunch.com%2F2014%2F05%2F24%2Fbefore-the-hamburger-button-kills-you%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-bbc-H-mystery-15"><span class="mw-cite-backlink"><b><a href="#cite_ref-bbc-H-mystery_15-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFStokel-Walker2015" class="citation news cs1">Stokel-Walker, Chris (16 May 2015). <a rel="nofollow" class="external text" href="https://www.bbc.co.uk/news/magazine-31602745">"Hamburger icon: How these three lines mystify most people"</a>. <i>BBC</i>. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20180220073719/http://www.bbc.co.uk/news/magazine-31602745">Archived</a> from the original on 2018-02-20<span class="reference-accessdate">. Retrieved <span class="nowrap">11 October</span> 2018</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=BBC&rft.atitle=Hamburger+icon%3A+How+these+three+lines+mystify+most+people&rft.date=2015-05-16&rft.aulast=Stokel-Walker&rft.aufirst=Chris&rft_id=https%3A%2F%2Fwww.bbc.co.uk%2Fnews%2Fmagazine-31602745&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-Loving_&_Hating_the_Hamburger_Icon-16"><span class="mw-cite-backlink">^ <a href="#cite_ref-Loving_&_Hating_the_Hamburger_Icon_16-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-Loving_&_Hating_the_Hamburger_Icon_16-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.webdesignerdepot.com/2018/09/loving-hating-the-hamburger-icon/">"Loving & Hating the Hamburger Icon"</a>. <i>Webdesigner Depot</i>. 2018-09-17<span class="reference-accessdate">. Retrieved <span class="nowrap">2019-02-23</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Webdesigner+Depot&rft.atitle=Loving+%26+Hating+the+Hamburger+Icon&rft.date=2018-09-17&rft_id=https%3A%2F%2Fwww.webdesignerdepot.com%2F2018%2F09%2Floving-hating-the-hamburger-icon%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-Hamburger_menu_icon:_should_it_be_on_the_left_or_right?-17"><span class="mw-cite-backlink"><b><a href="#cite_ref-Hamburger_menu_icon:_should_it_be_on_the_left_or_right?_17-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://uxpickle.com/hamburger-menu-icon-should-it-be-on-the-left-or-right/">"Hamburger menu icon: should it be on the left or right?"</a>. <i>UX Pickle</i>. 2018-09-17<span class="reference-accessdate">. Retrieved <span class="nowrap">2022-11-02</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=UX+Pickle&rft.atitle=Hamburger+menu+icon%3A+should+it+be+on+the+left+or+right%3F&rft.date=2018-09-17&rft_id=https%3A%2F%2Fuxpickle.com%2Fhamburger-menu-icon-should-it-be-on-the-left-or-right%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> <li id="cite_note-Tsiodoulos-18"><span class="mw-cite-backlink"><b><a href="#cite_ref-Tsiodoulos_18-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFTsiodoulos2016" class="citation thesis cs1">Tsiodoulos, Dimitrios (2016). <a rel="nofollow" class="external text" href="http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf"><i>Comparison of hamburger and bottom bar menu on mobile devices for three level navigation</i></a> <span class="cs1-format">(PDF)</span> (Thesis). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20180613235022/http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf">Archived</a> <span class="cs1-format">(PDF)</span> from the original on 2018-06-13<span class="reference-accessdate">. Retrieved <span class="nowrap">2018-06-13</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adissertation&rft.title=Comparison+of+hamburger+and+bottom+bar+menu+on+mobile+devices+for+three+level+navigation&rft.date=2016&rft.aulast=Tsiodoulos&rft.aufirst=Dimitrios&rft_id=http%3A%2F%2Fwww.diva-portal.org%2Fsmash%2Fget%2Fdiva2%3A922114%2FFULLTEXT01.pdf&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHamburger+button" class="Z3988"></span></span> </li> </ol></div> <div class="navbox-styles"><style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r1236075235">.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}</style></div><div role="navigation" class="navbox" aria-labelledby="Graphical_control_elements" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:GUI_widgets" title="Template:GUI widgets"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:GUI_widgets" title="Template talk:GUI widgets"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:GUI_widgets" title="Special:EditPage/Template:GUI widgets"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Graphical_control_elements" style="font-size:114%;margin:0 4em"><a href="/wiki/Graphical_widget" title="Graphical widget">Graphical control elements</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Command input</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Adjustment_handle" title="Adjustment handle">Adjustment handle</a></li> <li><a href="/wiki/Button_(computing)" title="Button (computing)">Button</a></li> <li><a href="/wiki/Context_menu" title="Context menu">Context menu</a></li> <li><a href="/wiki/Drop-down_list" title="Drop-down list">Drop-down list</a></li> <li><a class="mw-selflink selflink">Hamburger button</a></li> <li><a href="/wiki/Menu_(computing)" title="Menu (computing)">Menu</a></li> <li><a href="/wiki/Pie_menu" title="Pie menu">Pie menu</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Data input-output</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Checkbox" title="Checkbox">Checkbox</a></li> <li><a href="/wiki/Color_picker" title="Color picker">Color picker</a></li> <li><a href="/wiki/Combo_box" title="Combo box">Combo box</a></li> <li><a href="/wiki/Cycle_button" title="Cycle button">Cycle button</a></li> <li><a href="/wiki/Date_picker" title="Date picker">Date picker</a></li> <li><a href="/wiki/Grid_view" title="Grid view">Grid view</a></li> <li><a href="/wiki/Toggle_switch_(widget)" title="Toggle switch (widget)">Toggle switch</a></li> <li><a href="/wiki/List_box" title="List box">List box</a></li> <li><a href="/wiki/List_builder" title="List builder">List builder</a></li> <li><a href="/wiki/Radio_button" title="Radio button">Radio button</a></li> <li><a href="/wiki/Scrollbar" title="Scrollbar">Scrollbar</a></li> <li><a href="/wiki/Search_box" title="Search box">Search box</a></li> <li><a href="/wiki/Slider_(computing)" title="Slider (computing)">Slider</a></li> <li><a href="/wiki/Spinner_(computing)" title="Spinner (computing)">Spinner</a></li> <li><a href="/wiki/Text_box" title="Text box">Text box</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Informational</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Balloon_help" title="Balloon help">Balloon help</a></li> <li><a href="/wiki/HUD_(computing)" class="mw-redirect" title="HUD (computing)">Head-up display in computing</a></li> <li><a href="/wiki/HUD_(video_gaming)" class="mw-redirect" title="HUD (video gaming)">HUD in video games</a></li> <li><a href="/wiki/Icon_(computing)" title="Icon (computing)">Icon</a></li> <li><a href="/wiki/Infobar" title="Infobar">Infobar</a></li> <li><a href="/wiki/Label_(control)" title="Label (control)">Label</a></li> <li><a href="/wiki/Loading_screen" title="Loading screen">Loading screen</a></li> <li><a href="/wiki/Progress_indicator" title="Progress indicator">Progress indicator</a> <ul><li><a href="/wiki/Progress_bar" title="Progress bar">Progress bar</a></li> <li><a href="/wiki/Splash_screen" title="Splash screen">Splash screen</a></li> <li><a href="/wiki/Throbber" title="Throbber">Throbber</a></li></ul></li> <li><a href="/wiki/Sidebar_(computing)" title="Sidebar (computing)">Sidebar</a></li> <li><a href="/wiki/Status_bar" title="Status bar">Status bar</a></li> <li><a href="/wiki/Pop-up_notification" title="Pop-up notification">Toast</a></li> <li><a href="/wiki/Tooltip" title="Tooltip">Tooltip</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Containers</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Accordion_(GUI)" title="Accordion (GUI)">Accordion</a></li> <li><a href="/wiki/Tree_view" title="Tree view">Tree view</a></li> <li><a href="/wiki/Client-side_decoration" title="Client-side decoration">Client-side decoration</a></li> <li><a href="/wiki/Disclosure_widget" title="Disclosure widget">Disclosure widget</a></li> <li><a href="/wiki/Frame_(GUI)" title="Frame (GUI)">Frame / Fieldset</a></li> <li><a href="/wiki/Menu_bar" title="Menu bar">Menu bar</a></li> <li><a href="/wiki/Panel_(computer_software)" title="Panel (computer software)">Panel</a></li> <li><a href="/wiki/Popover_(GUI)" title="Popover (GUI)">Popover</a></li> <li><a href="/wiki/Ribbon_(computing)" title="Ribbon (computing)">Ribbon</a></li> <li><a href="/wiki/Tab_(interface)" title="Tab (interface)">Tab</a></li> <li><a href="/wiki/Toolbar" title="Toolbar">Toolbar</a></li> <li><a href="/wiki/Window_(computing)" title="Window (computing)">Window</a> <ul><li><a href="/wiki/Window_decoration" class="mw-redirect" title="Window decoration">Window decoration</a></li></ul></li> <li><a href="/wiki/Workspace" title="Workspace">Workspace</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Navigational</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Address_bar" title="Address bar">Address bar</a></li> <li><a href="/wiki/Breadcrumb_navigation" title="Breadcrumb navigation">Breadcrumb navigation</a></li> <li><a href="/wiki/Hyperlink" title="Hyperlink">Hyperlink</a></li> <li><a href="/wiki/Navigation_bar" title="Navigation bar">Navigation bar</a></li> <li><a href="/wiki/Virtual_desktop" title="Virtual desktop">Virtual desktop</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><span class="nowrap">Special <a href="/wiki/Window_(computing)" title="Window (computing)">windows</a></span></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Alert_dialog_box" title="Alert dialog box">Alert dialog box</a></li> <li><a href="/wiki/Dialog_box" title="Dialog box">Dialog box</a></li> <li><a href="/wiki/File_dialog" title="File dialog">File dialog</a></li> <li><a href="/wiki/Inspector_window" title="Inspector window">Inspector window</a></li> <li><a href="/wiki/Modal_window" title="Modal window">Modal window</a></li> <li><a href="/wiki/Palette_window" title="Palette window">Palette window</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Related concepts</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/File_viewer" title="File viewer">File viewer</a></li> <li><a href="/wiki/List_of_graphical_user_interface_elements" title="List of graphical user interface elements">List of graphical user interface elements</a></li> <li><a href="/wiki/Layout_manager" title="Layout manager">Layout manager</a></li> <li><a href="/wiki/Look_and_feel" title="Look and feel">Look and feel</a></li> <li><a href="/wiki/Mouseover" title="Mouseover">Mouseover</a></li> <li><a href="/wiki/Scrolling" title="Scrolling">Scrolling</a></li> <li><a href="/wiki/Widget_toolkit" title="Widget toolkit">Widget toolkit</a></li> <li><a href="/wiki/WIMP_(computing)" title="WIMP (computing)">WIMP</a></li> <li><a href="/wiki/Zoomable_user_interface" class="mw-redirect" title="Zoomable user interface">Zoomable user interface</a></li></ul> </div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Hamburger_button&oldid=1258819070">https://en.wikipedia.org/w/index.php?title=Hamburger_button&oldid=1258819070</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Category</a>: <ul><li><a href="/wiki/Category:Graphical_control_elements" title="Category:Graphical control elements">Graphical control elements</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:Articles_with_short_description" title="Category:Articles with short description">Articles with short description</a></li><li><a href="/wiki/Category:Short_description_matches_Wikidata" title="Category:Short description matches Wikidata">Short description matches Wikidata</a></li><li><a href="/wiki/Category:Pages_using_multiple_image_with_auto_scaled_images" title="Category:Pages using multiple image with auto scaled images">Pages using multiple image with auto scaled images</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 21 November 2024, at 20:21<span class="anonymous-show"> (UTC)</span>.</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=Hamburger_button&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-g5pcr","wgBackendResponseTime":818,"wgPageParseReport":{"limitreport":{"cputime":"0.482","walltime":"0.644","ppvisitednodes":{"value":1401,"limit":1000000},"postexpandincludesize":{"value":51103,"limit":2097152},"templateargumentsize":{"value":913,"limit":2097152},"expansiondepth":{"value":9,"limit":100},"expensivefunctioncount":{"value":5,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":78016,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 584.109 1 -total"," 52.17% 304.706 1 Template:Reflist"," 40.99% 239.419 15 Template:Cite_web"," 19.31% 112.785 1 Template:GUI_widgets"," 18.77% 109.608 1 Template:Navbox"," 14.57% 85.095 1 Template:Short_description"," 7.51% 43.876 2 Template:Pagetype"," 5.21% 30.439 1 Template:Wiktionary"," 5.13% 29.948 2 Template:Multiple_image"," 5.06% 29.527 3 Template:Main_other"]},"scribunto":{"limitreport-timeusage":{"value":"0.330","limit":"10.000"},"limitreport-memusage":{"value":5207500,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-f69cdc8f6-g5pcr","timestamp":"20241122150400","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"Hamburger button","url":"https:\/\/en.wikipedia.org\/wiki\/Hamburger_button","sameAs":"http:\/\/www.wikidata.org\/entity\/Q21306238","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q21306238","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2015-04-10T10:46:01Z","dateModified":"2024-11-21T20:21:08Z","image":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b2\/Hamburger_icon.svg","headline":"user interface element"}</script> </body> </html>