Navbar
SectionsTop navigation bars.
Simple Navbar
Logo
Live Functional Playground Interactive Hooks • useState
Interactive Preview
useState Active
Logo
Click element to toggle state
Motion Physics & Animation Showcase Framer Motion ✨
Motion Physics
✨
Logo
Hover to trigger spring elevation lift
Format:
Required Animation Library: framer-motion & lucide-react
Install this package in your project before importing the animated component.
npm i framer-motion lucide-react <header class="border-b bg-background w-full"><div class="container mx-auto flex h-16 items-center justify-between px-4"><div class="font-bold text-xl">Logo</div><nav class="hidden md:flex gap-6"><a href="#" class="text-sm font-medium hover:text-primary">Home</a><a href="#" class="text-sm font-medium hover:text-primary">About</a></nav><button class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header><header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center justify-between px-4"><div className="font-bold text-xl">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium hover:text-primary">Home</a><a href="#" className="text-sm font-medium hover:text-primary">About</a></nav><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header>"use client";
import React, { useState } from "react";
interface NavSimpleProps {
className?: string;
children?: React.ReactNode;
}
export default function NavSimple({
className = "",
children,
}: NavSimpleProps) {
const [isActive, setIsActive] = useState(false);
return (
<div
onClick={() => setIsActive(!isActive)}
className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
>
<header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center justify-between px-4"><div className="font-bold text-xl">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium hover:text-primary">Home</a><a href="#" className="text-sm font-medium hover:text-primary">About</a></nav><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header>
</div>
);
}"use client";
import React from "react";
import { motion } from "framer-motion";
export default function AnimatedNavSimple() {
return (
<motion.div
initial={{ opacity: 0, scale: 0.96 }}
animate={{ opacity: 1, scale: 1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 350, damping: 25 }}
className="cursor-pointer"
>
<header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center justify-between px-4"><div className="font-bold text-xl">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium hover:text-primary">Home</a><a href="#" className="text-sm font-medium hover:text-primary">About</a></nav><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header>
</motion.div>
);
}Centered Navbar
Logo
Live Functional Playground Interactive Hooks • useState
Interactive Preview
useState Active
Logo
Click element to toggle state
Motion Physics & Animation Showcase Framer Motion ✨
Motion Physics
✨
Logo
Hover to trigger spring elevation lift
Format:
Required Animation Library: framer-motion & lucide-react
Install this package in your project before importing the animated component.
npm i framer-motion lucide-react <header class="border-b bg-background w-full"><div class="container mx-auto flex h-16 items-center px-4"><nav class="hidden md:flex gap-6 flex-1"><a href="#" class="text-sm font-medium hover:text-primary">Home</a></nav><div class="font-bold text-xl flex-1 text-center">Logo</div><div class="flex-1 flex justify-end"><button class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></div></header><header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center px-4"><nav className="hidden md:flex gap-6 flex-1"><a href="#" className="text-sm font-medium hover:text-primary">Home</a></nav><div className="font-bold text-xl flex-1 text-center">Logo</div><div className="flex-1 flex justify-end"><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></div></header>"use client";
import React, { useState } from "react";
interface NavCenteredProps {
className?: string;
children?: React.ReactNode;
}
export default function NavCentered({
className = "",
children,
}: NavCenteredProps) {
const [isActive, setIsActive] = useState(false);
return (
<div
onClick={() => setIsActive(!isActive)}
className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
>
<header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center px-4"><nav className="hidden md:flex gap-6 flex-1"><a href="#" className="text-sm font-medium hover:text-primary">Home</a></nav><div className="font-bold text-xl flex-1 text-center">Logo</div><div className="flex-1 flex justify-end"><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></div></header>
</div>
);
}"use client";
import React from "react";
import { motion } from "framer-motion";
export default function AnimatedNavCentered() {
return (
<motion.div
initial={{ opacity: 0, scale: 0.96 }}
animate={{ opacity: 1, scale: 1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 350, damping: 25 }}
className="cursor-pointer"
>
<header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center px-4"><nav className="hidden md:flex gap-6 flex-1"><a href="#" className="text-sm font-medium hover:text-primary">Home</a></nav><div className="font-bold text-xl flex-1 text-center">Logo</div><div className="flex-1 flex justify-end"><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></div></header>
</motion.div>
);
}Navbar with Search
Logo
Live Functional Playground Interactive Hooks • useState
Interactive Preview
useState Active
Logo
Click element to toggle state
Motion Physics & Animation Showcase Framer Motion ✨
Motion Physics
✨
Logo
Hover to trigger spring elevation lift
Format:
Required Animation Library: framer-motion & lucide-react
Install this package in your project before importing the animated component.
npm i framer-motion lucide-react <header class="border-b bg-background w-full"><div class="container mx-auto flex h-16 items-center gap-4 px-4"><div class="font-bold text-xl">Logo</div><div class="flex-1 max-w-md mx-auto hidden md:block"><input class="w-full h-10 px-3 rounded-md border" placeholder="Search..." /></div><button class="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header><header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center gap-4 px-4"><div className="font-bold text-xl">Logo</div><div className="flex-1 max-w-md mx-auto hidden md:block"><input className="w-full h-10 px-3 rounded-md border" placeholder="Search..." /></div><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header>"use client";
import React, { useState } from "react";
interface NavSearchProps {
className?: string;
children?: React.ReactNode;
}
export default function NavSearch({
className = "",
children,
}: NavSearchProps) {
const [isActive, setIsActive] = useState(false);
return (
<div
onClick={() => setIsActive(!isActive)}
className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
>
<header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center gap-4 px-4"><div className="font-bold text-xl">Logo</div><div className="flex-1 max-w-md mx-auto hidden md:block"><input className="w-full h-10 px-3 rounded-md border" placeholder="Search..." /></div><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header>
</div>
);
}"use client";
import React from "react";
import { motion } from "framer-motion";
export default function AnimatedNavSearch() {
return (
<motion.div
initial={{ opacity: 0, scale: 0.96 }}
animate={{ opacity: 1, scale: 1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 350, damping: 25 }}
className="cursor-pointer"
>
<header className="border-b bg-background w-full"><div className="container mx-auto flex h-16 items-center gap-4 px-4"><div className="font-bold text-xl">Logo</div><div className="flex-1 max-w-md mx-auto hidden md:block"><input className="w-full h-10 px-3 rounded-md border" placeholder="Search..." /></div><button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">Sign In</button></div></header>
</motion.div>
);
}Dark Navbar
Logo
Live Functional Playground Interactive Hooks • useState
Interactive Preview
useState Active
Logo
Click element to toggle state
Motion Physics & Animation Showcase Framer Motion ✨
Motion Physics
✨
Logo
Hover to trigger spring elevation lift
Format:
Required Animation Library: framer-motion & lucide-react
Install this package in your project before importing the animated component.
npm i framer-motion lucide-react <header class="bg-slate-900 text-white w-full"><div class="container mx-auto flex h-16 items-center justify-between px-4"><div class="font-bold text-xl">Logo</div><nav class="hidden md:flex gap-6"><a href="#" class="text-sm font-medium hover:text-blue-400">Home</a><a href="#" class="text-sm font-medium hover:text-blue-400">About</a></nav><button class="bg-white text-slate-900 px-4 py-2 rounded-md text-sm">Sign In</button></div></header><header className="bg-slate-900 text-white w-full"><div className="container mx-auto flex h-16 items-center justify-between px-4"><div className="font-bold text-xl">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium hover:text-blue-400">Home</a><a href="#" className="text-sm font-medium hover:text-blue-400">About</a></nav><button className="bg-white text-slate-900 px-4 py-2 rounded-md text-sm">Sign In</button></div></header>"use client";
import React, { useState } from "react";
interface NavDarkProps {
className?: string;
children?: React.ReactNode;
}
export default function NavDark({
className = "",
children,
}: NavDarkProps) {
const [isActive, setIsActive] = useState(false);
return (
<div
onClick={() => setIsActive(!isActive)}
className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
>
<header className="bg-slate-900 text-white w-full"><div className="container mx-auto flex h-16 items-center justify-between px-4"><div className="font-bold text-xl">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium hover:text-blue-400">Home</a><a href="#" className="text-sm font-medium hover:text-blue-400">About</a></nav><button className="bg-white text-slate-900 px-4 py-2 rounded-md text-sm">Sign In</button></div></header>
</div>
);
}"use client";
import React from "react";
import { motion } from "framer-motion";
export default function AnimatedNavDark() {
return (
<motion.div
initial={{ opacity: 0, scale: 0.96 }}
animate={{ opacity: 1, scale: 1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 350, damping: 25 }}
className="cursor-pointer"
>
<header className="bg-slate-900 text-white w-full"><div className="container mx-auto flex h-16 items-center justify-between px-4"><div className="font-bold text-xl">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium hover:text-blue-400">Home</a><a href="#" className="text-sm font-medium hover:text-blue-400">About</a></nav><button className="bg-white text-slate-900 px-4 py-2 rounded-md text-sm">Sign In</button></div></header>
</motion.div>
);
}Floating Navbar
Logo
Live Functional Playground Interactive Hooks • useState
Interactive Preview
useState Active
Logo
Click element to toggle state
Motion Physics & Animation Showcase Framer Motion ✨
Motion Physics
✨
Logo
Hover to trigger spring elevation lift
Format:
Required Animation Library: framer-motion & lucide-react
Install this package in your project before importing the animated component.
npm i framer-motion lucide-react <div class="p-4 bg-muted/20 w-full"><header class="bg-background rounded-full shadow-lg border w-full max-w-4xl mx-auto"><div class="px-6 flex h-14 items-center justify-between"><div class="font-bold">Logo</div><nav class="hidden md:flex gap-6"><a href="#" class="text-sm font-medium">Home</a><a href="#" class="text-sm font-medium">About</a></nav><button class="bg-primary text-primary-foreground px-4 py-1.5 rounded-full text-sm">Sign In</button></div></header></div><div className="p-4 bg-muted/20 w-full"><header className="bg-background rounded-full shadow-lg border w-full max-w-4xl mx-auto"><div className="px-6 flex h-14 items-center justify-between"><div className="font-bold">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium">Home</a><a href="#" className="text-sm font-medium">About</a></nav><button className="bg-primary text-primary-foreground px-4 py-1.5 rounded-full text-sm">Sign In</button></div></header></div>"use client";
import React, { useState } from "react";
interface NavFloatingProps {
className?: string;
children?: React.ReactNode;
}
export default function NavFloating({
className = "",
children,
}: NavFloatingProps) {
const [isActive, setIsActive] = useState(false);
return (
<div
onClick={() => setIsActive(!isActive)}
className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
>
<div className="p-4 bg-muted/20 w-full"><header className="bg-background rounded-full shadow-lg border w-full max-w-4xl mx-auto"><div className="px-6 flex h-14 items-center justify-between"><div className="font-bold">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium">Home</a><a href="#" className="text-sm font-medium">About</a></nav><button className="bg-primary text-primary-foreground px-4 py-1.5 rounded-full text-sm">Sign In</button></div></header></div>
</div>
);
}"use client";
import React from "react";
import { motion } from "framer-motion";
export default function AnimatedNavFloating() {
return (
<motion.div
initial={{ opacity: 0, scale: 0.96 }}
animate={{ opacity: 1, scale: 1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
transition={{ type: "spring", stiffness: 350, damping: 25 }}
className="cursor-pointer"
>
<div className="p-4 bg-muted/20 w-full"><header className="bg-background rounded-full shadow-lg border w-full max-w-4xl mx-auto"><div className="px-6 flex h-14 items-center justify-between"><div className="font-bold">Logo</div><nav className="hidden md:flex gap-6"><a href="#" className="text-sm font-medium">Home</a><a href="#" className="text-sm font-medium">About</a></nav><button className="bg-primary text-primary-foreground px-4 py-1.5 rounded-full text-sm">Sign In</button></div></header></div>
</motion.div>
);
}