Hamburger Menu
UI ComponentsA button consisting of three horizontal lines that, when clicked, reveals a hidden navigation menu. Named for its resemblance to a hamburger.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Hamburger Menu coming soon.
How It Works in Apps/Websites
The hamburger icon (three stacked lines) serves as a toggle for hidden navigation, primarily on mobile devices. Tapping it opens a drawer or dropdown with navigation links. The icon often animates to an X when open. Saves screen real estate by collapsing navigation into a single button.
How AI Interprets This Term
When you say 'hamburger menu', AI expects: an icon button with three horizontal lines (each ~20px wide, 2-3px thick, spaced 4-6px apart). When clicked, it opens a navigation drawer/overlay. Icon may animate to X when open. Usually positioned in header, left or right side.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Add a hamburger menu icon that opens a mobile navigation drawer
Design an animated hamburger menu: three lines 24px wide, 2px thick, 6px gap, dark gray color. On click, animates smoothly to X (top/bottom lines rotate 45deg, middle fades). Opens a full-screen mobile navigation overlay from the right.
Show the hamburger icon animation sequence from closed to open state
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Mobile navigation
- •Responsive headers
- •When navigation has many items
- •Secondary navigation
When NOT to Use
- •Desktop with space for links
- •Primary app navigation
- •When discoverability matters
Related Terms
Drawer
A panel that slides in from the edge of the screen (usually left or right) to reveal navigation, filters, or additional content without navigating away from the current view.
Navbar
A horizontal navigation bar typically placed at the top of a page, containing the logo, main navigation links, and often search or user account controls.