Don’t be surprised when you hear that websites and apps have hamburgers inside. However, you can’t order them with fries – these are digital ones, and you implement them into your web platform functionality.
You probably have seen a three-lined icon at the top right- or left-hand corner of a website or app. By tapping or clicking it, you can open a menu with a selection of additional pages or options. Consisting of three parallel lines, it resembles a traditional burger but with a graphic take. That is the hamburger menu for you. And if you wonder how to use it or seek some inspiration – keep reading the article.
What is a hamburger menu
In a nutshell, a hamburger menu is a triple bar icon that opens up to display your website’s navigation. Its delicious name comes from its appearance – just like its real-life counterpart, consisting of three horizontal edges – a top bun, a patty, and a bottom bun. You can also encounter other names to describe the icon, including:
- triple bar
- double oreo
- side menu
- navigation drawer
Its primary function is to switch the navigation between the main screen and a side menu. A hamburger menu takes up a minimal amount of screen real estate, enabling designers to pack more features into the navigation without overloading the main page. However, its functionality might not always be immediately evident when first encountered. Some think it confuses and urges users to take some additional actions, which impacts their experiences. Still, it doesn’t deprive a hamburger menu of its massive popularity in contemporary web design.
Hamburger menu history
Back in the 80s, the first hamburger icon appeared for Xerox Star. Its creator – a user interface designer, Norm Cox – considered several symbols to represent the side menu. A downward-pointing triangle was out of the game because of the high possibility of false interpretation. It would act as a pointer rather than a selection of options, which might confuse users. A plus symbol was too abstract to stand for the concept of the menu, the same as the asterisk. Thus, an original four-lined hamburger image turned out to be the most appropriate to stowing a list of actionable items. It was visually simple yet functionally memorable, not ambiguous, and easily explained.
Since then, the icon has been waiting for recognition for almost 30 years. In the late 2000s, the design has become more responsive to the user’s behavior and environment based on platform, screen size, and orientation. The situation got tougher with the advent of mobile websites and apps. There was not much space for excessive creativity nor complete functionality on mobile resolutions. And the hamburger menu appeared to be an excellent leverage to the problem. It took a small amount of screen real estate and, at the same time, it provided users with excellent functionality, neither impeding the website performance nor overloading the visuals.
Thus, the icon started showing up in various apps, including Twitter and Facebook. Then, being used by most of Google’s apps, it has achieved official recognition and became a standard in UI/UX design lexicon.
Pros and cons of a hamburger menu
Since the hamburger menu appeared, its value has been debated heavily within the web design community, and arguments don’t stop until now. Some believe it to be an essential part of the contemporary designer’s toolkit, while others reject its efficiency. No doubt, it significantly simplifies the visual design, leaving space for more critical design elements.
Still, it also impacts the information architecture and user experience in some ways. Users need to take extra steps while surfing the platform, and what about those unfamiliar with the sign? Let’s delve deeper and examine a list of its advantages and disadvantages.
#01 It is recognizable
It has been decades since the hamburger button embedded itself in the social consciousness as the icon to access the navigation drawer. As simple as it is, its purpose and function are transparent, thus clear. People know it like a ubiquitous trash icon that enables them to delete files or a home button to go to the main menu. Even though few users may know it is called a hamburger, the icon solidly holds its standard. So, it is a universal sign recognized everywhere that doesn’t require decoding or translation into other languages.
#02 It contributes to more clean design
You don’t want to overwhelm your users with too many options. Numerous points can distract them from the primary purpose so that they will leave your web platform in confusion. By hiding items behind the menu, you can avoid that. The hamburger menu keeps the overall design free of clutter, enabling a smooth user experience.
The option is extremely effective when it comes to mobile websites or apps. Here, the screen real estate is relatively small, and the design should be condensed yet complete.
#03 It simplifies navigation
The hamburger menu allows designers to highlight primary navigation by moving secondary menu options from the main screen to a side menu. It is especially appropriate when you have many options that don’t directly service the goal of your web page. Not only it relieves the weight of numerous incentives on the users, but it also makes your navigation more structured and transparent.
#04 It provides direct access
Once users click on a hamburger button, they immediately obtain direct access to the preferred item. It means that they don’t have to go through numerous pages in sequential order to find what they need. Just a few clicks and the menu takes them to the right place.
Although some might claim that clicking on a hamburger icon is an extra step, it streamlines the interaction that only benefits the user experience. It doesn’t require them to scroll through irrelevant content before arriving at their destination. Besides, when on mobile, users expect speed and quick access to functionality even more than on the desktop. And sequential access doesn’t always provide them with that.
#01 It is hard to discover
Some designers believe the menu is difficult to discover behind the hamburger button. It obscures the content behind the icon that provides no information scent and urges users to do more work to figure out what’s behind. There are at least three reasons for that:
- the small size of an icon or blended background and icon colors that make it almost invisible
- its position in the top left corner is the same as a back button, and users may easily mix them up
- not everyone is familiar with a navigation drawer: what is a side menu for one may be an unknown icon or list for another
#02 It creates extra effort
When hidden behind the hamburger icon, menu features take longer to be discovered. First, users click on the icon, then on the tab, and then they probably have to search for the right options in sub-sections. Thus, users go through several extra steps, which can cause frustration as most would prefer to act immediately. And anything requiring some additional effort from the users is often seen as taboo in web design.
#03 It is hard to reach on mobile
The main complication of a hamburger menu on mobile is that it might be hard to click on without messing up the previous progress. Users struggle with it because of the small screen resolution or a tiny button itself. Sometimes it takes them several attempts to open up a menu, which only causes annoyance and dissatisfaction.
Hamburger menu: to use or not to use
If you’re not discouraged by the cons of a hamburger menu and want to implement that trend in your design, you need to know one more important thing. Any design trend should agree with the context of the app. Thus, make sure you utilize a hamburger menu considering the peculiarities of the platform and analyzing its compatibility with the central purpose of the app.
When to use a hamburger menu:
- Hide secondary features, bringing exposure to the primary ones
Each website has its conversion goals. And depending on these goals, it features specific navigational points and options for users to come to the desired outcome. However, some elements may be less significant in leading users to accomplish determined aims and disrupt them. Still, they are necessary to form a complete website functionality. You can’t simply get rid of these – but you can hide them, giving more exposure to the options that matter. It might not be as important that users contact you or see your About section, for instance. And when hiding those options behind the hamburger menu, you can highlight the primary things on your website without overwhelming users with too much information on the screen.
- Save screen real estate
You may ask: why hide some options if you have enough space on the screen? Especially if these options provide a more thorough and versatile user experience. In reality, things go differently. When offering loads of options and features, you can increase the cognitive load on the users, which will result in higher bond rates. Overly-cluttered screens alienate users, and they don’t want to go through the enormous content but prefer skipping the website searching for a more transparent one.
When to not use a hamburger menu:
- It hides core features
You shouldn’t use the hamburger menu if the options it conceals are central to the user experience. They must be constantly visible on a top bar or fixed tab bar to provide a direct discovery to the main touchpoints.
- Your website is already interaction heavy
There are quite a few clicks that are paramount to the user experience and website conversion goals. And if your website is already stuffed with interaction, adding even more extra steps might be fatal. When urging users to click on the hamburger menu and then go through the sub-categories to find what they need may overwhelm your website interaction cost. You always need to think about the user experience first and reduce the number of possible touchpoints to ensure it is valuable and smooth.
- It interferes with native navigation
You should remember that almost all mobile phones have native navigation, which is built on top of the iOS or Android platform navigational components. The last thing you want to do is to place a hamburger menu to hide the device’s native navigation and confuse the visitors. Users tend to employ native options when surfing the websites on their mobiles, and depriving them of that possibility might cost you a lot.
Findings on mobile VS desktop
Also, it might be helpful to examine some peculiarities of hamburger menu behavior when on mobile and desktop. Nielsen Norman Group’s study showed that users resort to the hamburger menu on mobile websites more than on desktop. The reason is that desktop users tend to rely heavily on the search bar, accessing the preferred item quicker than through clicking on several buttons.
Another crucial point to consider is that an entirely hidden navigation appeals less than that of the visible one regardless of the device. It means that people are significantly more likely to use navigation when all the points are visible.
Still, a hamburger menu can be a valuable asset for mobile websites and apps. It works as a space-saving mechanism that cleans up the screen real estate allowing for structured and smooth design. Be sure you have at least four or more options to hide. If you have fewer, it’s better to show your top-level navigation links on the main page, making a shift to visible navigation.
In general, the decision entirely depends on your specific goals and the environment you have to put inside a hamburger menu. As simple as it is – when a hamburger menu might work for one website or app, it won’t necessarily bring the same value to another.
Hamburger menu inspiration
Once we’ve established the ways in which a hamburger menu can please or displease the users on both mobile and desktop, let’s look at a few delicious examples that will make your mouth water.
Top 10 responsive website hamburger menu examples
Awwwards hamburger menu offers users the ability to access the information without suffering from navigation clutter, avoiding any extra noise of vast content. It has an extensive list of features that opens up in a side menu when clicking on the icon. What we liked the most about Awwwards is that it supplements the hamburger button with a “Menu” label. This input makes the navigation easy and comprehensive, thus transparent.
02 Google Maps
Google Maps website is a content-first platform. Thus, it dedicates almost all the screen real estate to a map with only a few key UI elements, including zoom-in and zoom-out tools and a prominent search bar at the top. The secondary navigational points are out of the user viewport, placed in a hamburger menu. It naturally shifts focus to the primary content, making the purpose of a website easy to comprehend.
For big brands with complex products or an abundance of features, a hamburger menu is something to consider. Walmart successfully implements one into its website’s functionality. Its clear-cut hamburger menu icon perfectly fits the website header design in terms of position and color, making it easy to digest. Once opened, the menu presents a complete list of categories and subcategories of goods along with other options. It allows consumers to navigate through such heavy content without any obstacles.
An Australian branding agency, Overport, uses a hamburger menu to save space on their homepage to display impressive visuals, exemplifying their works. It is a perfect solution to bring primary content to the storefront, not impeding the functionality. Their full-page hamburger menu opens up into a clean, minimalist, and contrastive design, providing users with a joyful and seamless experience.
The hamburger menu of the IMDb website stands out for many reasons. It delicately covers all the content, placing it according to categories, which greatly improves the platform’s usability. Although the color palette is simple, it catches attention immediately because of the contrast so that nothing will escape the user’s sight. Besides the original three-lined icon, it also features a “Menu” label, making it even more recognizable.
As you arrive on the L’Oreal website, you can immediately see a simple three-lined hamburger menu icon at the top of the screen. When hovering over the icon, it changes the color, which makes the user experience interactive and pleasant. The menu involves several navigational items and subcategories seen when clicking on an arrow sign. Such an architecture makes the overall navigation well-structured and clutter-free.
07 Frankie Ratford
Another decent example of a great hamburger menu is that of the Frankie Ratford business website. It features a prominent hamburger icon at the right-hand corner of the screen that is highly visible due to the minimalist design of the main page.
As it opens up, you can see a bright pink lightbox with few navigational items on the list. Sometimes, simplicity is the key.
08 The New York Times
The New York Times website’s elegant hamburger menu offers users what they need right away. It gathers all the news in one place, dividing it into categories and subcategories for better navigation. That allows readers to come to the preferred content block in just a few clicks. The design is minimalist, and it doesn’t impede the perception of heavy information within the menu.
09 8590 Group
8590 Group is a creative media agency that aims at showcasing its works to potential clients. Its main screen space is occupied by an impressive visual of one of their relevant projects, while others can be found in the hamburger menu. Here, a hamburger menu acts as a valuable space-saving mechanism, allowing for better content architecture.
A classic hamburger menu icon of the Ducknology online store is placed at the upper left-hand corner of the platform. This strategic placement guarantees that users will click to see what’s hidden behind and discover more about the brand and its products.
Top 10 mobile mobile and app hamburger menu examples
E-commerce giant Amazon is a great example of using the hamburger menu properly. It features a distinctive three-lined icon at the top of the screen that allows users to find what they are looking for as soon as they open up the mobile website. The menu comprises a complete list of categories and content blocks that help shoppers to navigate the platform easily.
02 Google Pay
When you are busy checking out of an online shop, the last thing you need is to navigate through dozens of items when accessing your Google Pay account. Hopefully, designers have seen that and implemented an excellent hamburger menu that hides secondary options, advancing high usability and a smooth user experience.
As you arrive at your Twitter feed, you can notice a small hamburger icon at the top left corner of the screen. It opens up a list of options that direct you toward the desired page. Such an approach allows users to navigate the app and easily switch between its functionalities.
Plex app allows watching movies and TV shows, listening to podcasts and music of all kinds. Being packed with vast content and numerous information blocks, it does its best at providing users with an easy way of surfing the platform. Its hamburger menu features all the categories, allowing users to get the preferred media almost effortlessly.
Being one of the most famous social media apps, Instagram also manages to put the hamburger menu to great use. It allows users to go through their publications without struggling with any disturbing items. The secondary options are hidden behind the hamburger icon at the top right corner. It advances better usability and doesn’t interfere with the central purpose of the platform, bringing visual performance to the storefront.
Just as in Google maps, the whole screen of Uber is dedicated to the map because its primary goal is to help users to schedule a car. Its secondary navigation points don’t directly correspond to the main aim, thus are less likely to be used every time users open it. That’s why designers put them out of view until clicking on a hamburger menu icon on the top left.
Another excellent example of a hamburger menu is that of the Coachella app. When users open up the menu, they see various options with small images above the features. Its dazzling design captivates from the first seconds, urging visitors to explore every option from the list.
08 Google Docs
The Google Docs app makes showing the users all their most recent files a priority. Thus, the rest of the secondary navigation features are hidden out of the way behind a hamburger menu. That practice facilitates the user experience and goes hand-in-hand with the purpose of the platform.
Unibox is an app that helps you to keep control of your mailbox, grouping them by the sender. It has quite a simple functionality and stores its options behind the hamburger menu. That contributes to the cleaner design of the app and greatly improves its usability.
Evernote app uses a bottom hamburger menu placed at the left corner of the platform. Such a disposition makes the menu always at the viewport of the user. When you open it, you can see some additional options and features. These are not so vital to the central purpose of the platform and are hidden so as not to overload the main screen.
Alternatives to a hamburger menu
Once again, a hamburger menu is not an optimal decision, and sometimes it’s better to avoid it. If immediately viewable features are more of a priority than screen real estate, or you don’t have enough functions to hide behind the hamburger button – don’t use it. If the button would interfere with the native navigation, or you’re not sure about the users easily understanding the icon – pick another solution. Thankfully, there are many alternatives to choose from:
- Labeled menu
A hamburger menu can be more recognizable and transparent when labeled with the word “Menu.” It erases confusion of what is behind the button, which significantly increases the number of clicks as compared to an ordinary three-lined button. It is a good alternative if you don’t want a significant change but need to increase conversions.
- Bottom navigation
This type of navigation has been adopted by such industry giants as Facebook, Buffer, and Flipagram, and for good reasons. First, bottom navigation allows users to see the core features and functionalities immediately on the home screen. Also, it tells users what page they are surfing. And finally, it provides direct access to all of the features, allowing users to rapidly switch between pages using a single click without returning to the home screen.
- Floating hamburger menu
Being instantly prominent, a floating hamburger menu acts as an easily accessible and recognized navigation drawer. It allows users to open up a menu whenever they are on the page. Its prominent positioning signifies the importance and drives users toward actually using it. Although the floating hamburger menu saves screen real estate, it can hide the content when used on mobile devices without being responsive.
- Responsive navigation
If you use both mobile and desktop versions of a website, a responsive navigation menu is a valuable asset to have. In a nutshell, it is a menu that responds based on the viewer’s screen size, allowing users to enjoy the platform regardless of the device.
Still, there are some pitfalls to consider. If you have less than four navigation links on the desktop, don’t hide them behind the hamburger on mobile. The links are few, so you can easily show them on the screen. It will eliminate confusion among users and erase any significant disparity between the versions, signalizing they come to the right place.
- Parallax scroll
One more decent alternative is the parallax scroll. It creates a smooth and delicate user experience, making navigation through the platform easy and intuitive. However, it offers sequential access rather than a direct one, which can heavily slow the navigation process. In other words, users need to scroll through several pages to get where they need. For better effect, it can be complemented with a navigation bar on the top of the screen indicating which page it is that keeps users from getting lost within pages.
- Slide-out navigation tabs
This alternative allows maximizing the screen real estate because being entirely hidden over the page. It uses gesture control that means users can simply swipe right to pull up the menu. It suits the websites with many options and features, not allowing them to impede the interaction but directly access them from the navigation drawer. However, it may cause interference with page UI design, which is a significant drawback to the platform’s usability.
- Navigation with vertical lettering
Looking increasingly fresh and trendy, vertical lettering navigation naturally stands out from the others. It is compact yet informative: just a narrow line on the left-hand corner of a page. In other words, it’s a perfect solution for contemporary designs. Still, it might be visually weighty as it stretched almost to the height of the screen.
- Combination navigation
As the name implies, combination navigation encompasses several navigation options, bringing the best of each. For instance, you can use both a hamburger menu with a menu label and a prominent search bar. It widens the possibilities for the users, resulting in a better user experience. The search bar gives them an opportunity to find the preferred item immediately, which can be extremely helpful for desktop visitors. At the same time, a hamburger menu allows for navigating the website from its eternal side, seeing all its features at once. All in all, the users are to decide what is up to fit their needs.
However, when employing combination navigation, you need to keep a close eye on the big picture to avoid an unbalanced and perplexing image. Make sure that all of the components are well-structured and comprehensive. The icons should harmonize in size, position, form, and color, creating a clear visual hierarchy on the page. Otherwise, you can get a cluttered design in which all the navigational points would not even be visible.
On a final note
When choosing to use a hamburger menu, make sure it is for the right reason and done employing best practices. Otherwise, it can damage your platform’s usability and alienate users instead of helping them to navigate through the content. When used and designed correctly, corresponding to the website conversion goal, it can offer you a distinct advantage. Not only it brings user experience on a more prolific level, but it also makes your content digestible and easily accessible. At least, you can look for alternatives. The list is abundant so that you will definitely find the one that suits your needs best.
Ultimately, remember that implementing a hamburger menu is a significant decision that takes you to focus on multiple things simultaneously. Don’t simply go for trends, but go for rationale, and you will reach impressive outcomes.
If you’re still unsure whether to use a hamburger menu or go for an alternative – contact us. Ester Digital will study your case thoroughly and provide you with the best decision possible.