A complete guide to the hamburger menu with 14 examples

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.