Build · UI components · beginner

Build a Responsive Navigation with Mobile Menu

UI components General beginner v0LovableBolt.new

How to use

  1. Copy the prompt below
  2. Paste it into v0, Lovable, Bolt.new
  3. Review the output and follow up with refinements
Prompt
Create a responsive top navigation bar for this app. On desktop (768px and wider), show the logo on the left, four navigation links centered (Features, Pricing, Docs, Blog), and a CTA button ("Get started") on the right. On mobile, hide the nav links and replace them with a hamburger icon button on the right side of the nav. When tapped, the hamburger should toggle a full-width dropdown panel below the nav bar showing the same four links stacked vertically with adequate tap target size, plus the CTA button at the bottom. The nav should have a subtle 1px border-bottom and become sticky when the user scrolls past the top of the page. Highlight the currently active page link with a different color or underline. Close the mobile menu automatically when the user clicks any link, clicks anywhere outside the dropdown, or presses the Escape key.

Related prompts

Was this helpful?