Hamburger Menu

What Is a Hamburger Menu?

A hamburger menu is a navigation pattern that hides links behind a small icon. That icon usually looks like three horizontal lines. When the user clicks or taps the icon, the menu opens.

Why Use One?

Hamburger menus are common on phones and tablets because smaller screens do not have much room for a full navigation bar. Hiding the links can make the layout feel cleaner, but it also means the visitor has to click to see the menu.

How This Example Works

• A hidden checkbox is used to keep track of whether the menu is open or closed.
• A label is connected to that checkbox and acts like the hamburger button.
• When the checkbox is checked, CSS reveals the menu.
• This version also uses animation so the menu opens more smoothly.

What to Notice

• Look at how the label, input, and ul are arranged in the HTML.
• Notice that the checkbox is still present in the code even though it is hidden on the page.
• Resize the browser window to see how the menu changes on smaller screens.

Try It

Make your browser window smaller, then click the ☰ icon to open and close the menu.