All Components

Navbar Hover Animation

In modern web development, smooth animations and clean interactions are key to enhancing user experience. Let's explore this dynamic navigation bar component built with Next.js, Framer Motion, and Tailwind CSS.

Watch the tutorial on YouTube

Let's begin by installing Framer Motion.

npm install framer-motion

import { motion } from "framer-motion";
import { useState } from "react";

const TABS = ["about", "projects", "blogs", "contact"];

State Management

const [hovered, setHovered] = useState("about");

Final Component Structure

 "use client";
import { motion } from "framer-motion";
import { useState } from "react";

const TABS = ["about", "projects", "blogs", "contact"];

function HoverAnimation() {
const [hovered, setHovered] = useState("about");

return (

<nav className="flex items-center justify-center space-x-2 md:space-x-12 w-full">
{TABS.map((tab, index) => (
  <motion.a
    key={index}
    href="/"
    onHoverStart={() => setHovered(tab)}
    className="group relative text-xs md:text-2xl lg:text-3xl px-2 py-1.5 md:px-5 md:py-2 hover:text-gray-200 duration-200 capitalize"
  >
    {tab}
    {hovered === tab && (
      <motion.span
        layoutId="nav-item"
        className="absolute bg-gray-100 bg-opacity-10 inset-0 rounded-full"
      />
    )}
  </motion.a>
))}
</nav>
); }

export default HoverAnimation;

This hover-animated navigation bar enhances user interactions with smooth and visually appealing effects. Using Framer Motion and Tailwind CSS, we achieved a clean and modern design for an intuitive navigation experience.

Happy Coding 👋

Want to Learn How to Build These Components Yourself?

We have step-by-step tutorials for every component to help you create stunning interfaces with ease.

Tutorials on YouTube