Navigation bar components for website headers. Includes responsive mobile menus, dropdowns, and various styles.
Dependencies: lucide-react
Clean and minimal navbar with logo on left, centered navigation links, and CTA button on right. Includes mobile hamburger menu.
Feature-rich navbar with dropdown menus for navigation, search input field, and user avatar with profile dropdown.
Transparent navbar designed for hero sections. Uses glassmorphism with white text, and transitions to solid background on scroll. Perfect for landing pages.
Hero section content here
Scroll to see navbar transition (in real usage)
import { Navbar } from "@/components/ui/navbar";
export default function Layout({ children }) {
return (
<>
<Navbar />
<main>{children}</main>
</>
);
}
// For transparent navbar, place it inside a hero section:
export default function HeroPage() {
return (
<div className="relative">
<Navbar /> {/* Will be transparent over hero */}
<section className="bg-gradient-to-r from-purple-600 to-indigo-600 min-h-screen">
{/* Hero content */}
</section>
</div>
);
}