📖 Step 2: Design - UI/UX Basics#40 / 291
Nav Bar
Navigation Bar
📖One-line summary
The menu bar at the top of the page.
✨Example
Navigation bar example
MyApp
HomeServicesAboutContact
⚡Vibe coding prompt examples
>_
Build a responsive nav bar. Show a horizontal menu on desktop and switch to a hamburger menu on mobile. Place the logo on the left and the login button on the right.
>_
Build a nav bar whose background changes from transparent to white on scroll. Add a smooth transition.
>_
Add search to the nav bar. Implement an animation where clicking the magnifier icon expands an input field.
Try these prompts in your AI coding assistant!