📖 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!