Hamburger menu

A hamburger menu is a widely used user interface element in the form of a small icon made of three horizontal lines that visually resemble the layers of a hamburger. When clicked or tapped, the icon reveals a previously hidden navigation menu — most often sliding in from the side of the screen or dropping down from the top. The pattern gained enormous popularity alongside the rise of responsive web design and mobile-first thinking.

What a hamburger menu involves

The main purpose of the hamburger menu is to conserve limited screen space. Instead of showing the full navigation permanently — which on a narrow smartphone screen would eat a large part of the viewport — the designer collapses it into a single icon and reveals it only on demand. The mechanism is simple:

• Collapsed state — only the icon is visible, usually in a corner of the header, freeing space for content.
• Interaction — a tap triggers the panel of links to expand, often with a slide-in animation.
• Expanded state — the full list of navigation items, closed by tapping the icon again or the backdrop.

Although the icon is associated mainly with mobile versions, it also appears on desktop in applications with a rich structure, where it tidies a side menu.

Hamburger menu in practice

The hamburger menu is now almost a standard for mobile navigation, but using it demands judgment:

1. Mobile site versions — it tidies the interface and frees space for key content.
2. Web applications — it hides an elaborate side menu the user summons when needed.
3. A UX trade-off — hiding navigation lowers its discoverability, so on large screens a visible horizontal menu is often worth considering instead of the icon.

From a UX standpoint, good practice is a clear, high-contrast icon and attention to accessibility — keyboard operation and proper labels for screen readers.