Hamburger menu: a bit of history and alternatives

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 real popularity of the hamburger menu button gained 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 (tabs)

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 the mobile hamburger menu on the site 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 can fit the screen of a particular device is shown. If all the tabs still do not fit, they will appear in the More section.

Scrolling navigation

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 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 clue about the need to use horizontal scrolling to view other objects. Besides, not every user will like the idea of ​​scrolling navigation.

Drop-down menu

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

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.

Vertical text

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 method of navigation looks impressive, but it is not obvious. To prevent a block with vertical text from merging 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 in that it saves screen space, 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 there are other functions 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?