Docs
Menu list
Animation for menu list
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/list/menu-animation.jsonManual
Install dependencies
npm install lucide-reactRun 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.tsxPaste 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/menu flex items-center gap-2">
<ArrowRight className="size-5 -translate-x-full text-black opacity-0 transition duration-300 ease-out hover:z-20 group-hover/menu:translate-x-0 group-hover/menu:text-blue-500 group-hover/menu: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/menu:translate-x-0 group-hover/menu:text-blue-500 dark:text-white md:-translate-x-12 md:text-4xl md:group-hover/menu:translate-x-0">
{item}
</h1>
</div>
))}
</div>
);
}Credits
Built by Sumin Gurung