Hamburger Menu

Display a menu icon for mobile devices

What it solves

Hamburger Menu is a three-line icon (☰) that toggles a hidden navigation panel, primarily on mobile and small-screen devices. Tapping or clicking the icon reveals the site's navigation, then hides it again when dismissed. This pattern conserves screen real estate on smaller viewports while keeping the full navigation accessible behind a single, universally recognized affordance.

When to use

Use Hamburger Menu to provide full navigation access on small screens without consuming permanent layout space. Common scenarios include:

• Mobile or responsive websites where horizontal space is limited
• Sites with extensive navigation that cannot fit in a single row on smaller screens
• Progressive web apps that mimic native mobile app patterns
• Responsive redesigns of desktop navigation menus
• Admin dashboards or complex apps with many navigation items