{"id":2118,"date":"2018-08-14T13:04:01","date_gmt":"2018-08-14T13:04:01","guid":{"rendered":"https:\/\/www.vocso.com\/blog\/?p=2118"},"modified":"2024-09-05T10:34:36","modified_gmt":"2024-09-05T10:34:36","slug":"various-alternatives-to-hamburger-menu-on-mobile-apps","status":"publish","type":"post","link":"https:\/\/www.vocso.com\/blog\/various-alternatives-to-hamburger-menu-on-mobile-apps\/","title":{"rendered":"Various Alternatives to Hamburger Menu on Mobile Apps"},"content":{"rendered":"<div style=\"margin-top: 0px; margin-bottom: 0px;\" class=\"sharethis-inline-share-buttons\" ><\/div><p><center>Image source &#8211; <strong><a href=\"https:\/\/dribbble.com\/shots\/3205968-Hamburger-Menu-Icon\" target=\"_blank\" rel=\"nofollow noopener\">Amy Chang<\/a><\/strong><\/center><\/p>\n<p>Various comments, questions, and criticisms have graced the use of the hamburger menu in mobile apps and even outside mobile apps in recent times. The hamburger menu (also called the three-line menu or the hotdog menu) is a menu which contains the traditional menus on mobile devices making the file menus easy to view.<\/p>\n<p>The comments about the hamburger menu largely talks about the UI (User Interface) or the UX (User Experience) designs with arguments bothering on the fact that the hamburger menu hurts the UI\/UX design due to its discoverability level as well as its effectiveness.<\/p>\n<p>With this, alternatives are churning out in lieu of the hamburger menu and very amazing ones are now being utilized for mobile apps (as well as across many other digital devices). Below, you will find some alternatives to use when you feel like shunning the hamburger menu. You can just play around these alternatives as the usage of any of them is largely dependent on the user\u2019s choice and considerations.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.vocso.com\/blog\/various-alternatives-to-hamburger-menu-on-mobile-apps\/#1-top-or-bottom-%e2%80%9ctabs%e2%80%9d\" >1. Top or bottom \u201ctabs\u201d<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.vocso.com\/blog\/various-alternatives-to-hamburger-menu-on-mobile-apps\/#2-tabs-%e2%80%9cmore%e2%80%9d\" >2. Tabs + \u201cmore\u201d<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.vocso.com\/blog\/various-alternatives-to-hamburger-menu-on-mobile-apps\/#3-employing-a-drop-down-menu\" >3. Employing a drop-down menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.vocso.com\/blog\/various-alternatives-to-hamburger-menu-on-mobile-apps\/#4-make-the-menus-scrollable\" >4. Make the menus scrollable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.vocso.com\/blog\/various-alternatives-to-hamburger-menu-on-mobile-apps\/#5-make-the-menus-collapse-or-expand-according-to-the-screen-size-and-resolution\" >5. Make the menus collapse or expand according to the screen size and resolution<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.vocso.com\/blog\/various-alternatives-to-hamburger-menu-on-mobile-apps\/#6-align-the-menus-vertically\" >6. Align the menus vertically<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.vocso.com\/blog\/various-alternatives-to-hamburger-menu-on-mobile-apps\/#final-note\" >Final note<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1-top-or-bottom-%e2%80%9ctabs%e2%80%9d\"><\/span>1. Top or bottom \u201ctabs\u201d<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2127\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Top-or-bottom-tabs.png\" alt=\"Top or bottom tabs\" width=\"800\" height=\"600\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Top-or-bottom-tabs.png 800w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Top-or-bottom-tabs-300x225.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Top-or-bottom-tabs-768x576.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Top-or-bottom-tabs-624x468.png 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><center>Image source &#8211; <strong><a href=\"https:\/\/dribbble.com\/shots\/3109000-Day-014-Hamburger-menu\" target=\"_blank\" rel=\"nofollow noopener\">by Judicy<\/a><\/strong><\/center><\/p>\n<p>The usage of \u201ctabs\u201d can come in handy in lieu of the hamburger menu when designing your mobile apps. Tabs can be used at either the top or the bottom of a mobile app. Tabs will be especially useful when there is a little space and as a result of this, tabs should be limited to four or five menus. It is even more useful when the sections in your mobile apps are limited.<\/p>\n<p>Tabs can be used with or without labels. Tabs with labels will assist users in knowing the contents of the menus while tabs without labels will assume that users already know the probable menu contents. Unlabeled tabs are more common with popular apps which users are already familiar with. LinkedIn uses icon-only tabs while Google photos uses icon and label. The two, you\u2019d see, are unique in their own ways. You must also take note of the arrangement of the tabs by doing so in a reasonable order.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2-tabs-%e2%80%9cmore%e2%80%9d\"><\/span>2. Tabs + \u201cmore\u201d<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2129\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Tabs-plus-more.jpg\" alt=\"Tabs plus more\" width=\"800\" height=\"600\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Tabs-plus-more.jpg 800w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Tabs-plus-more-300x225.jpg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Tabs-plus-more-768x576.jpg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Tabs-plus-more-624x468.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><center>Image source &#8211; <strong><a href=\"https:\/\/dribbble.com\/shots\/2667071-Hamburger-Menu-Profile\" target=\"_blank\" rel=\"nofollow noopener\">by Manav Khadkiwala<\/a><\/strong><\/center><\/p>\n<p>In addition to the tabs, you can also add a \u201cmore\u201d menu which will be a drop-down menu or a link to many other sections of the app. This is similar to the hamburger menu in function. However, a clear dissimilarity will be achieved with the level of prioritization of the remaining tabs and also with the visibility of the \u201cmore\u201d tab in contrast to the hamburger menu.<\/p>\n<p>In regards to the prioritization level, other tabs alongside the \u201cmore\u201d tab should highlight major sections of the apps. The \u201cmore\u201d tab would, hence, direct to other low prioritized menus. A drop-down tab would assist more in ensuring a one-time view of the other sections. Also, the \u201cmore\u201d tab would be more visible than the hamburger menu and a label would even accentuate it in contrast with the hamburger menu.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3-employing-a-drop-down-menu\"><\/span>3. Employing a drop-down menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2130\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Employing-a-drop-down-menu.png\" alt=\"Employing a drop-down menu\" width=\"800\" height=\"600\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Employing-a-drop-down-menu.png 800w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Employing-a-drop-down-menu-300x225.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Employing-a-drop-down-menu-768x576.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Employing-a-drop-down-menu-624x468.png 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>A drop-down menu is an interesting alternative for the hamburger menu. This menu largely serves as a title for your page. In essence, it is the one thing which serves to encompass all the other sections in your product. This menu, thus, will be the most important and the other sections will come under it as submenus.<\/p>\n<p>An arrow should be used with a drop-down menu which will serve to tell the users that there are unexplored contents in the menu (or that it is a drop-down menu which has lots of sections). You should note that the sections that will be contained in the single drop-down menu must be ones which are like sisters of the menu; they shouldn\u2019t be far away from the menu in terms of their similarities.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4-make-the-menus-scrollable\"><\/span>4. Make the menus scrollable<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2131\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Make-the-menus-scrollable.jpg\" alt=\"Make the menus scrollable\" width=\"800\" height=\"600\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Make-the-menus-scrollable.jpg 800w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Make-the-menus-scrollable-300x225.jpg 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Make-the-menus-scrollable-768x576.jpg 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Make-the-menus-scrollable-624x468.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><center>Image source &#8211; <strong><a href=\"https:\/\/dribbble.com\/shots\/944572-iOS-hamburger-menu-design\" target=\"_blank\" rel=\"nofollow noopener\">by BLStream<\/a><\/strong><\/center><\/p>\n<p>Another way to bypass the use of the hamburger menu is to use a navigation which would be scrollable. This would allow for a limited number of items to be seen first-hand while the remaining items would not be visible on the canvas.<\/p>\n<p>In this style, the items that are readily visible on the front page would be noticed while the other ones would be hidden. Hence, it is good to ensure that the most important items are listed first in the visible pane.<\/p>\n<p>An important thing to note, however, is that this menu style should be indicated with a visual integration to make users aware that there are still more items for view on the canvas. When this is not done, the menu may not be useful for its purpose and it will jeopardize its alternativeness for the hamburger menu.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5-make-the-menus-collapse-or-expand-according-to-the-screen-size-and-resolution\"><\/span>5. Make the menus collapse or expand according to the screen size and resolution<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><center><div style=\"width: 625px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-2118-1\" width=\"625\" height=\"469\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Make-the-menus-collapse-or-expand.mp4?_=1\" \/><a href=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Make-the-menus-collapse-or-expand.mp4\">https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Make-the-menus-collapse-or-expand.mp4<\/a><\/video><\/div><\/p>\n<p><\/center><\/p>\n<p><center>Video source &#8211; <strong><a href=\"https:\/\/dribbble.com\/shots\/2293621-Hamburger-Menu-Animation\" target=\"_blank\" rel=\"nofollow noopener\">by Vitaly Rubtsov<\/a><\/strong><\/center><\/p>\n<p>Here, a menu style such that will collapse progressively when the screen resolution gets smaller is meant. This style uses the \u201cmore\u201d option in some cases such as when the screen size is smaller. When the screen size is larger, however, the items on the menu might all be listed on the tabs and there will not be any need to use the \u201cmore\u201d option.<\/p>\n<p>A good prioritization is very important in this menu style as this would be more useful in smaller screens. This points to the fact that smaller screens will display fewer menus plus \u201cmore\u201d menu. Therefore, the best menus should be put in the most prioritized list while the other menus can be used under the \u201cmore\u201d menu.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"6-align-the-menus-vertically\"><\/span>6. Align the menus vertically<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2132\" src=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Align-the-menus-vertically.png\" alt=\"Align the menus vertically\" width=\"800\" height=\"600\" srcset=\"https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Align-the-menus-vertically.png 800w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Align-the-menus-vertically-300x225.png 300w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Align-the-menus-vertically-768x576.png 768w, https:\/\/www.vocso.com\/blog\/wp-content\/uploads\/2018\/08\/Align-the-menus-vertically-624x468.png 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><center>Image source &#8211; <strong><a href=\"https:\/\/dribbble.com\/shots\/1317759-TwoSmiles-Menu\" target=\"_blank\" rel=\"nofollow noopener\">by Greg Wilkinson<\/a><\/strong><\/center><\/p>\n<p>Another menu style on mobile apps that can be used instead of the hamburger menu is to vertically align the menu in a stylish form. It, though, have its excess as it bore weight on the visual experience of the user due to the long list form, nonetheless, it is still a menu style to explore.<\/p>\n<p>This form of menu can, probably, list all the items of the products. This is a better visual style for the vertical listing as using a \u201cmore\u201d menu here may disrupt the visual experience. However, a \u201cmore\u201d option can still be reasonably incorporated here.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"final-note\"><\/span>Final note<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Who says the hamburger menu would not work well for you? Of course these are alternatives which may go well with you or otherwise. There is actually not a clingy style you should hold on to; rather, you should choose your style based on the best UI\/UX design form and of course considering the best aesthetics model and architectural platform for the users of your mobile app.<\/p>\n<p>You can get a way of testing your product\u2019s design with your users to know the best design to adopt for your app. So, feel free to explore and adorn your mobile apps with the best of designs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image source &#8211; Amy Chang Various comments, questions, and criticisms have graced the use of the hamburger menu in mobile apps and even outside mobile apps in recent times. The hamburger menu (also called the three-line menu or the hotdog menu) is a menu which contains the traditional menus on mobile devices making the file <\/p>\n","protected":false},"author":23,"featured_media":3196,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[80,58],"tags":[498,494,495,501,499,497,220,496,502,500],"class_list":["post-2118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","category-user-experience","tag-drop-down-menus","tag-hamburger-menu-alternatives","tag-mobile-app-design","tag-mobile-design-trends","tag-scrollable-navigation","tag-tabs-in-mobile-apps","tag-user-experience-ux","tag-user-interface-ui","tag-ux-ui-best-practices","tag-vertical-menu-alignment"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/posts\/2118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/comments?post=2118"}],"version-history":[{"count":0,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/posts\/2118\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/media\/3196"}],"wp:attachment":[{"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/media?parent=2118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/categories?post=2118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vocso.com\/blog\/wp-json\/wp\/v2\/tags?post=2118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}