Search-Expand Navigation Bar

A nav bar that morphs its search icon into a search field and then grows upward into a card with recent-search suggestions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Search-Expand Navigation Bar to your project and fits it to your theme.

import SearchExpandNav from "@/components/ui/search-expand-nav";

export default function SearchExpandNavDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <SearchExpandNav />
    </div>
  );
}