top of page

Copied

A complete guide to the hamburger menu with 12 examples


Complete guide to the hamburger menu

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 barbecue dish, the hamburger button opens up to display your website’s navigation menu—a.k.a. 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 full-screen 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 for 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 outweigh 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.



Hamburger menu example by Bhroovi Gupta


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.



Hamburger menu example by Overport branding agency


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.



Hamburger Menu example by Yang's Place


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.



Hamburger menu example by Pei Jung


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.



Hamburger Menu example by Wendy Ju


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.



Hamburger Menu example by 8590 group


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.



Hamburger menu example by JR Taylor


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.



Hamburger menu example by Ducknology


09. Miranda Sofroniou | Illustrator


Miranda’s illustrations are placed front and center on her homepage, presented in an engaging, full-screen 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.



Hamburger Menu example by Miranda Sofroniou


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 than 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.



Hamburger menu example by The Wild Collective


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.



Hamburger Menu example by Kunstrukt


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.



Hamburger Menu example by Daniel Aristizabal


10 tips for the best hamburger menu design


When it comes to designing a hamburger menu for your website, it's worth keeping some of these design best practices in mind:



01. Visibility and placement


Top left or top right? This is the first question to ask yourself. Place your menu icon in the top left or top right corner of the screen, where users typically expect it. At the same time make sure your hamburger menu is in the same position across all of your webpages - aim for consistency in placement as this is essential for a smooth user experience.



2. Icon design


Make sure you use the standard three horizontal lines (☰) to represent the hamburger menu. It's widely recognized and understood by users. Any icon you choose to use should be simple, clear and large enough to be easily found and tapped on mobile.



03. Animation and feedback


Consider adding a subtle animation to the icon when it's clicked to provide visual feedback. This can really improve the user experience. Then think about having your menu icon change to an 'X' or another symbol when the menu is open to show that it can be closed.



04. Menu design


When designing your hamburger menu, organize menu items logically, grouping related items together. Be aware of keeping the menu items to a minimum to avoid overwhelming users.

Then choose legible fonts, with enough contrast between the text and the background.



05. Mobile-friendly design


Make sure your hamburger menu works and is accessible on mobile as well as on desktop. This also means menu items should be large enough to be easily tapped on mobile or touchscreens.



06. Accessibility


When designing your hamburger menu there are a few key accessibility principles to keep in mind. One is to make sure that your menu can be navigated using the keyboard. Consider using ARIA (Accessible Rich Internet Applications) attributes to make the menu accessible to screen readers.



07. Smooth transitions


You should use smooth transitions for the menu opening and closing to enhance the user experience. Alongside this you need to make sure that your menu transitions are quick enough not to delay users but slow enough to be noticeable.



08. Content optimization


When planning your hamburger menu always make sure to position the most important items at the top of the menu. You can also think about using icons next to menu items to make them more recognizable and improve navigation speed.



09. Background overlay


Good hamburger menu design can often mean dimming the rest of the screen, when the menu is open. This is designed to draw attention to the menu and focus a user on it. Another good design option is 'click to close', where menu users can click on any part of the screen outside of the menu to close it.



10. Testing and feedback


Always get real users to try and test your hamburger menu before implementing it. If you need to you can make design adjustments based on this feedback.

Was this article helpful?

bottom of page