Hamburger Menu Examples

A small project exploring how hamburger menus work on responsive websites.

What is a hamburger menu?

A hamburger menu is a navigation pattern that hides links behind a 𑁔 icon. That icon is made of three horizontal lines, which is why it is often called a hamburger menu.

When the user clicks or taps the icon, the hidden menu appears. This pattern is common on phones and tablets because smaller screens do not leave much room for a full horizontal navigation bar.

Why do websites use hamburger menus?

Hamburger menus help save space and can make a layout feel cleaner, especially on smaller screens. Instead of displaying every navigation link all the time, the menu stays hidden until the user needs it.

This can be helpful, but it also creates a tradeoff. If navigation is hidden, users must notice the icon and click it before they can see where to go next.

Advantages

  • Saves space on small screens
  • Can make a layout feel cleaner
  • Works well for mobile navigation
  • Keeps links organized in a compact area

Disadvantages

  • Navigation is hidden until clicked
  • Some users may not notice the icon right away
  • Important links become less visible
  • It can hurt usability if used poorly

What this project includes

This project includes one main hamburger menu example and one more advanced example. The main example demonstrates the core idea using a hidden checkbox, a label, and CSS to reveal the menu on smaller screens.

Main Hamburger Menu Example

This is the main lesson example. It uses a hidden checkbox and a label to open and close a mobile navigation menu, and it includes a smooth animation.

View Main Example

Animated Icon Example

This is a more advanced version where the hamburger icon itself animates. It is a good example of how the same basic idea can be expanded with extra polish.

View Advanced Example

Tips for this learning exercise

  • Pay close attention to the HTML structure of the menu.
  • Notice how the label and input work together.
  • Compare the simple menu behavior to the more advanced animated icon version.
  • Think about how the menu behaves on a phone versus a desktop screen.
  • Remember that a feature is only successful if it helps the visitor use the site more easily.

Keep in mind

A hamburger menu is not always the best choice. Designers often use them when screen space is limited, but hidden navigation can sometimes make a site feel less clear. As you explore these examples, think not only about how the code works, but also about when this kind of navigation is a good design choice.