The Navbar will show on top of the page
Installation
Install dependencies
npm i motion clsx tailwind-merge
Add util file
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Copy the source code
components/ui/navbar-menu.tsx
"use client";
import React from "react";
import { motion } from "motion/react";
const transition = {
type: "spring",
mass: 0.5,
damping: 11.5,
stiffness: 100,
restDelta: 0.001,
restSpeed: 0.001,
};
export const MenuItem = ({
setActive,
active,
item,
children,
}: {
setActive: (item: string) => void;
active: string | null;
item: string;
children?: React.ReactNode;
}) => {
return (
<div onMouseEnter={() => setActive(item)} className="relative ">
<motion.p
transition={{ duration: 0.3 }}
className="cursor-pointer text-black hover:opacity-[0.9] dark:text-white"
>
{item}
</motion.p>
{active !== null && (
<motion.div
initial={{ opacity: 0, scale: 0.85, y: 10 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={transition}
>
{active === item && (
<div className="absolute top-[calc(100%_+_1.2rem)] left-1/2 transform -translate-x-1/2 pt-4">
<motion.div
transition={transition}
layoutId="active" // layoutId ensures smooth animation
className="bg-white dark:bg-black backdrop-blur-sm rounded-2xl overflow-hidden border border-black/[0.2] dark:border-white/[0.2] shadow-xl"
>
<motion.div
layout // layout ensures smooth animation
className="w-max h-full p-4"
>
{children}
</motion.div>
</motion.div>
</div>
)}
</motion.div>
)}
</div>
);
};
export const Menu = ({
setActive,
children,
}: {
setActive: (item: string | null) => void;
children: React.ReactNode;
}) => {
return (
<nav
onMouseLeave={() => setActive(null)} // resets the state
className="relative rounded-full border border-transparent dark:bg-black dark:border-white/[0.2] bg-white shadow-input flex justify-center space-x-4 px-8 py-6 "
>
{children}
</nav>
);
};
export const ProductItem = ({
title,
description,
href,
src,
}: {
title: string;
description: string;
href: string;
src: string;
}) => {
return (
<a href={href} className="flex space-x-2">
<img
src={src}
width={140}
height={70}
alt={title}
className="shrink-0 rounded-md shadow-2xl"
/>
<div>
<h4 className="text-xl font-bold mb-1 text-black dark:text-white">
{title}
</h4>
<p className="text-neutral-700 text-sm max-w-[10rem] dark:text-neutral-300">
{description}
</p>
</div>
</a>
);
};
export const HoveredLink = ({ children, ...rest }: any) => {
return (
<a
{...rest}
className="text-neutral-700 dark:text-neutral-200 hover:text-black "
>
{children}
</a>
);
};
Props
Prop name | Type | Description |
---|---|---|
className | string | The class name of the child component. |
Build websites faster and 10x better than your competitors with Aceternity UI Pro
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
The work that Manu did laid the foundation of online education that we provide today. The website he built for us is used by thousands of students every day. He took the requirements and built the ...
Jagvinder Kour
Chairperson at Golden Bells Academy