DocsComponentsBlog
Star us
Docs

Menu list

Animation for menu list

Installation

Install dependencies

npm install lucide-react

Run the following command

It will create a new file called menu-animation.tsx inside the components/animata/list directory.

mkdir -p components/animata/list && touch components/animata/list/menu-animation.tsx

Paste the code

Open the newly created file and paste the following code:

import { ArrowRight } from "lucide-react";
 
interface MenuAnimationProps {
  menuItems: string[];
}
 
export default function MenuAnimation({ menuItems }: MenuAnimationProps) {
  return (
    <div className="flex min-w-fit flex-col gap-2 overflow-hidden px-10">
      {menuItems.map((item, index) => (
        <div key={index} className="group flex items-center gap-2">
          <ArrowRight className="size-5 -translate-x-full text-black opacity-0 transition-all duration-300 ease-out hover:z-20 group-hover:translate-x-0 group-hover:text-blue-500 group-hover:opacity-100 md:size-10" />
 
          <h1 className="z-10 -translate-x-6 cursor-pointer font-mono font-semibold text-black transition-transform duration-300 ease-out group-hover:translate-x-0 group-hover:text-blue-500 dark:text-white md:-translate-x-12 md:text-4xl md:group-hover:translate-x-0">
            {item}
          </h1>
        </div>
      ))}
    </div>
  );
}

Credits

Built by Sumin Gurung

Edit this page on GitHub
Flipping cardsOrbiting Items