top of page


A complete guide to the hamburger menu with 14 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 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.

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

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

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

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.

Hamburger Menu example by Payton Pitts

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.

Hamburger Menu example by Frankie Ratford

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 this 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 simle, 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 kepe 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