📖 Step 3: Design - UI Components & Patterns#74 / 291
Hamburger Menu
Hamburger Menu
📖One-line summary
A hidden menu that opens when you tap the three-line (≡) icon.
✨Example
Click the hamburger icon
MyApp
Home
About
Services
Contact
⚡Vibe coding prompt examples
>_
Animate the hamburger icon transforming into an X icon in CSS. Make the three lines morph smoothly into an X.
>_
Build a hamburger menu where opening it slides a sidebar in from the left. Also place a translucent overlay on the background.
>_
Build a hamburger menu visible only on mobile. Switch responsively to a normal nav bar at 768px and above.
Try these prompts in your AI coding assistant!