Animated Menu with variants

Navigation 2

About

- Animated Menu component with orchestrated children animation, fully customizable.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Menu with variants to your project and fits it to your theme.

Code

How Animated Menu with variants is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client'
import { AnimatedMenu,
  AnimatedMenuButton,
  CloseAnimatedMenu,
  AnimatedMenuButtonToggleIcon,
  AnimatedMenuItem,
  AnimatedMenuList } from "@/components/ui/animated-menu-with-variants";
import Link from 'next/link';
import { Variants } from 'motion/react';

const menuItems = [
  {
    title: 'Home',
    href: '/#home',
  },
  {
    title: 'About',
    href: '/#about',
  },
  {
    title: 'Services',
    href: '/#Services',
  },
  {
    title: 'Portfolio',
    href: '/portfolio',
  },
  {
    title: 'Contact',
    href: '/contact',
  },
];
const socialLinks = [
  {
    title: 'Github',
    href: 'https://github.com/YoucefBnm/',
  },
  {
    title: 'Linkedin',
    href: 'https://www.linkedin.com/in/',
  },
  {
    title: 'X',
    href: 'https://x.com/lbnm_yussef',
  },
  {
    title: '21st',
    href: 'https://21st.dev/community/YoucefBnm',
  },
];

export default function DemoTwo() {
  const menuListvariants = {
    open: {
      width: 320,
      height: 420,
      transition: { duration: 0.75, ease: [0.76, 0, 0.24, 1] },
    },
    close: {
      width: 48,
      height: 48,
      transition: { duration: 0.75, delay: 0.2, ease: [0.76, 0, 0.24, 1] },
    },
  } as Variants;

  const menuItemVariants = {
    initial: {
      opacity: 0,
      y: 100,
    },
    enter: (i: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: 0.55 + i * 0.1,
        duration: 0.75,
      },
    }),
    exit: (i: number) => ({
      opacity: 0,
      y: -100,
      transition: {
        delay: 0.25 + -i * 0.1,
      },
    }),
  } as Variants;
  return (
     <div className="py-12 w-full self-start  flex items-start justify-between px-8">
      <span className="text-xl font-bold tracking-tight">Systaliko UI</span>
      <div className="flex gap-4">
        <AnimatedMenu className="relative ">
          <AnimatedMenuButton className="h-12 w-12">
            <AnimatedMenuButtonToggleIcon size="md" className="*:bg-zinc-100" />
          </AnimatedMenuButton>
          <AnimatedMenuList
            variants={menuListvariants}
            className="absolute right-7 top-0 bg-zinc-950/80 border border-zinc-50/10 backdrop-blur-sm rounded-3xl"
          >
            <div className="flex flex-col px-6 justify-evenly gap-6 items-start size-full">
              <div className="flex flex-col items-start gap-4 *:transition-blur *:duration-300 [&:hover>*]:blur-[2px] [&>*:hover]:blur-none">
                {menuItems.map((item, i) => (
                  <div className="overflow-hidden" key={item.title}>
                    <AnimatedMenuItem
                      className="perspective-dramatic perspective-origin-bottom"
                      variants={menuItemVariants}
                      order={i}
                    >
                      <CloseAnimatedMenu>
                        <Link
                          className="text-white text-2xl font-medium "
                          href={item.href}
                          title={item.title}
                        >
                          {item.title}
                        </Link>
                      </CloseAnimatedMenu>
                    </AnimatedMenuItem>
                  </div>
                ))}
              </div>
              <div className="flex gap-4 *:transition-blur *:duration-300 [&:hover>*]:blur-[2px] [&>*:hover]:blur-none">
                {socialLinks.map((item, i) => (
                  <div className="overflow-hidden" key={item.title}>
                    <AnimatedMenuItem order={i + menuItems.length} variants={menuItemVariants}>
                      <CloseAnimatedMenu>
                        <Link
                          className=" font-medium text-muted-foreground"
                          href={item.href}
                          title={item.title}
                        >
                          {item.title}
                        </Link>
                      </CloseAnimatedMenu>
                    </AnimatedMenuItem>
                  </div>
                ))}
              </div>
            </div>
          </AnimatedMenuList>
        </AnimatedMenu>
      </div>
    </div>
  )
}