Hamburger menu for the site
We continue to discuss the topic of navigation in web projects. After considering examples of breadcrumbs, we decided today to talk about the so-called hamburger menu. There was a time when this element brought freshness and novelty to user interfaces on mobile devices. This icon has become not only an integral part of the top mobile applications, but also began to be actively used in the site header (in adaptive versions and not only). It got to the point that the menu began to appear even where it was completely inappropriate. As a result, criticism fell on the hamburger menu button, and the former favorite turned into the culprit of the disputes.
Let’s understand and discuss why this navigation format has gained such popularity, and does it have worthy rivals these days? The material was written on the basis of this article, thanks to the author for interesting thoughts. We also recommend looking at examples of hamburger menu icons and scripts for its implementation.
The story of the popularity of three magic lines
The history of the adaptive hamburger menu began in 1981, when Xerox designer Norm Cox created the hamburger icon. This image was used in the Xerox Star system to indicate a list. However, the hamburger menu button gained real popularity in the era of smartphones: thanks to it, it was possible to fit the complex navigation of desktop applications on a small screen – it successfully hid behind three strips resembling the three components of a hamburger (two layers of bread and one layer of meat).
Popularity Hamburger Menu
The navigation option with the hamburger menu quickly became one of the most popular design elements for smartphones. To find the desired section / page, you just had to touch the screen, and not perform a series of actions.
If earlier the piling up of controls created chaos, distracted and increased the time for making decisions, now various icons, social networks, and much more drop-down lists, hidden by a neat icon.
Alternatives to the hamburger menu button in navigation
This implementation of the menu is not easy has become an indispensable element in the design of smartphone applications. However, she has alternatives that are worth paying attention to.
Tabs on LinkedIn / Google Photos
LinkedIn / Google Photos
Tabs are the easiest way to navigate. They are ideal for cases when the number of sections on the site does not exceed five. The first tab should be the main one, and the active one for convenience can be highlighted. Tabs can have subsections.
Tabs + More
Tabs + More button
If there are more than five sections on the site, you can arrange four tabs in the top control panel, and the fifth heading “More”. The remaining sections will open as a drop-down list or sidebar. Such navigation is better than a mobile hamburger menu on the site in that the frequently used functions are always in sight.
Gradually shrinking menu
Gradually shrinking menu
An even better option is a menu that adapts to the width of the page. In this case, the maximum number of tabs that can accommodate the screen of a particular device is displayed. If all the tabs still do not fit, they will be displayed in the “More” section.
Paytm Mobile App
Such an implementation is convenient in a situation where it is difficult to select the most important menu items and hide some functions in the “More” section. In this case, all the elements can be placed on one panel with the ability to scroll. However, due to the fact that only a few points will be visible, designers will need to give the user a visual hint about the need to use horizontal scrolling to view other objects. In addition, not every user will like the idea of scrolling navigation.
A large number of sections of equal importance, which do not need to be constantly kept in sight, can be hidden in a horizontal drop-down menu. To view hidden items, you need to click on the down arrow located next to the name of the main section.
LinkedIn and Facebook App
Bottom navigation is similar to the option using tabs – with the difference that the tabs are not located at the top, but at the bottom of the screen. The bottom panel can be visible or hidden (in this case, it appears when the page scrolls up or down endlessly). Points in such navigation are indicated by icons – with or without inscriptions.
Menu vertical text
Apart from the usual practice of horizontal text placement, there is a nascent trend in the vertical position of the text in the menu. The advantage of this solution is a significant saving of screen space: a narrow strip of text can accommodate the name of any section.
This navigation method looks impressive, but you cannot call it obvious.