We continue to discuss the topic of navigation in web projects. After considering examples of bread crumbs, today we decided 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 top mobile applications, but also began to be actively used in the header of sites (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 a culprit.
Let’s take a look and discuss why this navigation format has gained such popularity, and does it have worthy rivals these days? The material was written based on this article, thanks to the author for interesting thoughts. We also recommend taking a look at examples of hamburger menu icons and scripts for its implementation.
The history of the popularity of the three magic lines
The history of the adaptive hamburger menu began in 1981, when Xerox designer Norm Cox created a hamburger icon. This image was used in the Xerox Star System for listing. However, the hamburger menu button gained real popularity in the era of smartphones: thanks to it, it managed to fit the complex navigation of desktop applications on a small screen – it was successfully hidden behind three stripes resembling the three components of a hamburger (two layers of bread and one layer of meat).
The hamburger menu navigation option has quickly become 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 whole series of actions.
If previously the pile of controls created chaos, distracted and increased the time for making a decision, now various drop-down lists, search bars, social media icons and much more are hidden behind a neat icon.
Alternatives to the hamburger menu button in navigation
This implementation of the menu is not easy and has become a mandatory design element of smartphone applications. Nevertheless, it has alternatives that are also worth paying attention to.
Tabs are the easiest way to navigate. They are ideal for cases where the number of sections on the site does not exceed five. The first tab should be the main one, and the active one can be highlighted with color for convenience. Tabs can have subsections.
Tabs + “More”
If there are more than five sections on the site, you can arrange four tabs in the upper control panel, and head the fifth “More”. The remaining sections will open as a drop-down list or sidebar. Such navigation is better than a mobile hamburger menu on a website in that frequently used functions are always in sight.
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 the screen of a specific device can fit is shown. If all the tabs still do not fit, they will appear in the More section.
This 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 elements can be placed on one scrolling panel. However, due to the fact that only a few items will be visible, designers will need to give the user a visual cue to use horizontal scrolling to view other objects. Besides, not every user will like the idea of scrolling navigation.
A large number of sections of the same importance, which do not need to be constantly kept in sight, can be hidden in a drop-down horizontal menu. To view hidden items, you need to click on the downward arrow next to the name of the main section.
Bottom navigation is similar to tabbed navigation, with the difference that the tabs are not at the top, but at the bottom of the screen. The bottom panel can be visible or hidden (in this case, it is displayed when the page is scrolled infinitely up or down). Items in such navigation are indicated by icons – with or without labels.
Apart from the usual practice of horizontal text placement, there is an emerging trend of vertical positioning of text in the menu. The advantage of this solution is a significant saving of space on the screen: a narrow strip of text can accommodate the title of any section.
This navigation method looks impressive, but it is not obvious. To prevent a block with vertical text from blending in with the background, it is better to place it in a separate panel. Another version of such navigation is gaining popularity, in which the navigation menu is “scattered” around the perimeter of the page.
Still prefer the hamburger menu?
If you still prefer the option with a mobile hamburger menu for the site, try creating a floating element instead of the usual implementation. This solution is good because it saves space on the screen, and at the same time remains noticeable even on smartphones with a large screen.
Like any other UI detail, the hamburger menu button must be used wisely – otherwise it will only impair the user experience. This button unobtrusively informs the user that other functions are available to him that he can easily use, but hiding frequently used functions behind it is not a good idea. So it is important to determine which objects should always be in sight.
Do you use hamburger menu navigation for your site on desktop computers? Or are you only adding it to the mobile version?