No, we’re not talking about ordering lunch. In website jargon, a hamburger menu refers to a three lined icon typically placed on the top right or left hand corner of a website. A simplified, graphic take on the quintessential barbeque dish, the hamburger button opens up to display your website’s navigation menu - aka its meat and fillings - enabling a clean, clutter-free design and a convenient user experience.
Since its emergence over 30 years ago, the hamburger menu has been equally adored and despised - its advantages and disadvantages debated heavily in the web world. But in reality, the hamburger menu is an option that can be extremely useful for website owners and users alike.
When creating your own website, you might consider using this element. To help you along, this article will cover what exactly a hamburger menu is, its pros and cons and examples of websites that have perfected their hamburger menu practices.
What is a hamburger menu?
Since its creation in the 1980s by designer Norm Cox, the hamburger menu has not ceased evolving in the world of UX design. The original four-lined icon symbolized to users of the Xerox machine that if they pressed it, it would open up a list of actionable items.
Flashforward to the 2020s, the hamburger menu is more popular than ever. While it goes without saying that the original icon has been tweaked throughout the years, its function is now so widely recognized that many website owners take creative liberties to modernize and implement the image in different ways.
Its popularity can likely be attributed, but not limited, to the emergence of the mobile website, where the screen real estate is much smaller, and content design needs to be reformatted or condensed.
Using a hamburger menu can also be an asset to the desktop version of your website, for example if you want to bring the focus to impressive fullscreen visual elements, and tighten website navigation.
Pros and cons of the hamburger menu
Despite its advantages, the hamburger menu is not accepted by all as a winning feature. Let’s go over some of the pros and cons commonly discussed over the years to see if this is the right type of website menu for you.
Hamburger menu pros
Everyone recognizes it
Very few UI symbols have received as widespread adoption as the hamburger icon. The ubiquitous hamburger menu button is almost always understood, and its form and function are consistent, avoiding confusion by users.
Squeaky clean design
Sometimes, less is more. Using a hamburger menu will allow you to have a squeaky clean website. By collapsing items behind the menu, you can avoid overloading or distracting users with too many options.
Hello, screen real estate
It goes without saying that you’ll have more room on your screen if you hide some items behind the hamburger menu icon. This is especially useful to mobile navigation design. Plus, if there are certain features of your site that you know are less relevant than others, you can still keep them there without giving away prime screen real estate.
Direct access
There’s no question about it - once users click on a hamburger menu, they will have direct access to the menu items without having to go through extra steps to find the information they need. Some might argue that just clicking on a hamburger menu is an extra step, but when it streamlines the process of collecting information, it can only benefit the user experience.
Hamburger menu cons
Out of sight, out of mind
Many UX designers believe that the hamburger menu creates an “out of sight, out of mind” mentality for visitors, opting for noticeable solutions like breadcrumbs and breadcrumb navigation or status bars. When it comes to website navigation, hiding items behind the hamburger menu might signify to users that these features are not as important.
Harder to reach = lower click through rates
While the hamburger menu is generally well recognized, there are some who find that - especially on mobile devices - discoverability is low. Some users have a hard time when items are hidden, which will result in less engagement.
Creates extra steps for the user
Hiding information that you’d prefer the user to see right away is inefficient because they’ll have to go through more steps to get there. The case is different for each individual, and you might find that the benefits outway this disadvantage when implementing a hamburger menu into your site.
Hamburger menu examples
01. Bhroovi Gupta | UX Designer
Talk about personality! Bhroovi’s groovy website has a lot of it. Her clean-cut hamburger menu icon is perfectly aligned within her website’s header, preventing distraction from the energetic work displayed on her homepage. Once opened, the menu presents a full page of navigation options. Maintaining a uniform design, Bhroovi’s hamburger menu uses a font style and size that’s consistent with the rest of her site.
02. Overport | Branding Agency
Overport is an Australian branding agency that specializes in managing their client’s social media accounts. They’ve used the space on their homepage to display a slideshow of photographs that exemplify their work. In contrast, their full page hamburger menu opens up into a clean, distraction-free design, providing a designated spot where visitors can find important information easily.
03. Yang’s Place | Restaurant
Yang’s Place’s hamburger menu offers good value to their user experience. Yang’s Place’s homepage is full of delicious images and staggered navigation items that might seem overwhelming - until users click on the hamburger icon at the top of the page. Once it unfolds, the hamburger menu provides site visitors with the same information, but in a more organized and streamlined fashion.
04. Pei Jung Creative | Graphic Designer
Pei Jung Ho’s design portfolio stands out for so many reasons: eye-popping animation, the clever use of parallax scrolling features and of course, her tongue-in-cheek approach to the hamburger menu. The animated emoji is something that users will not miss, and fits well with her “appetite for design” slogan. Best of all, Pei Jung’s hamburger menu shows off her creative skills.
05. Wendy Ju | Graphic Designer
Everything about Wendy Ju’s portfolio website embodies the delicate nature of her visual language. Wendy’s hamburger menu is in sync with this aesthetic, made up of thin lines and a frame that matches her logo. Users who click on the menu will be presented with three pillars of navigation, that connect to Wendy’s about page, portfolio, and social media accounts. Wendy uses the addition of the hamburger menu to add more special effects to her site and emphasize her professional skills and style.
06. 8590 Group | Creative media agency
The 8590 Group website portfolio is a starting point for visitors who want to connect with the variety of projects led by the creative agency. Their homepage is a space that gives visitors an instant taste of 8590’s world, but the list of projects on the hamburger menu allows users to follow through to get more detail and really understand what they do.
07. JR Taylor | Choreographer
JR Taylor is a talented choreographer who has moves like you’ve never seen. JR boasts his work by adding a video montage with cool video effects to his homepage, and there’s no reason why he should sidetrack his viewers with a standard navigation bar. Instead, JR’s site has a perfectly visible hamburger menu for when visitors are ready to see more.
08. Ducknology | Jewelry Shop
Ducknology treats the homepage on their online store like a display window, placing images of their jewelry products and prices in the forefront. A classic hamburger menu icon is placed on the upper left corner of their site. The strategic placement almost guarantees that users will click to see what’s behind it, but because the visual focus is put immediately on their products, visitors are likely to spend time browsing and shopping before they click for more.
09. Miranda Sofroniou | Illustrator
Miranda’s illustrations are placed front and center on her homepage, presented in an engaging, fullscreen gallery layout. She’s perfectly placed a tiny hamburger menu icon into the frame of her homepage, ensuring that it doesn’t take the attention away from her works. Take note of the matching hues she’s chosen for her images’ hover effect and her menu’s background. Complementing the color scheme of your site with that of your hamburger menu will provide users with a pleasant - and sometimes more interesting - visual experience.
10. The Wild Collective | Art Collective
Wild Collective is all about bold visual and written statements, and the large elements on their site really emphasize this aspect of their work. The hamburger menu icon is a bit different then the standard, in the sense that it uses lines of varying lengths, but it's clear that its function is the same. The icon hides information such as press opportunities and the collective’s full manifesto. Because it is pinned on the homepage, visitors can browse through the rest of the site, while having continuous access to navigation.
11. Kunstrukt | Visual Artists
Kunstrukt is an artistic duo who let images do the talking. While their homepage focuses on exhibiting specific projects, the hamburger menu is an ideal way to provide users with more general information. Rather than using a typical hamburger icon, Kunstrukt uses symbols and text that are consistent with the rest of the site. Using a hover effect on the “menu” text opens up the menu without taking the user to a new page, offering a smooth navigation experience.
12. Daniel Aristizábal | Artistic Director
Daniel’s minimalistic hamburger menu is the perfect way to balance out the outstanding graphics on his site. While many UX designers worry about small hamburger menus like this being overlooked - it’s pinned to the homepage, so users can scroll through the page and be totally immersed in Daniel’s work, without missing the hamburger icon.
13. Payton Pitts | Photographer
Payton Pitts is a photographer who lays out a lot of her professional work and personality on her website. Her menu opens up to reveal a unique design that is seen repeatedly throughout her site. This is a good example of how hamburger menus can be customized by incorporating or eliminating certain elements in order to stay consistent or emphasize your personal style.
14. Frankie Ratford | Graphic Designer
While users can scroll through Frankie’s one-page site to find all the information they need, her hamburger menu is one way to find any item on her site, at any time. It offers users an option to view the navigation items in a more concise manner, and of course, using a bright pink lightbox keeps it just as exciting as the rest.
