Animated Menu with variants

Navigation 3

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

import { AnimatedMenu,
  AnimatedMenuButton,
  AnimatedMenuButtonLabel,
  AnimatedMenuButtonToggleIcon,
  AnimatedMenuItem,
  AnimatedMenuList } from "@/components/ui/animated-menu-with-variants";
import Link from 'next/link';

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 DemoOne() {
  return (
    <header className="fixed top-4 inset-x-4 ">
      <div className="rounded-full min-h-[68px]">
        <div className="flex min-h-[68px] items-center justify-between px-8 py-2">
          <span className="font-bold text-xl tracking-tighter">Systaliko UI</span>
          <div className="flex gap-4">
            <AnimatedMenu>
              <AnimatedMenuButton>
                <AnimatedMenuButtonToggleIcon className="*:rounded *:bg-accent-foreground" />
                <AnimatedMenuButtonLabel className="text-accent-foreground" />
              </AnimatedMenuButton>
              <AnimatedMenuList className="bg-black/40 border border-secondary-foreground/5 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) => (
                      <AnimatedMenuItem key={i} order={i}>
                        <Link
                          className="text-2xl font-medium text-secondary-foreground hover:text-foreground"
                          href={item.href}
                          title={item.title}
                        >
                          {item.title}
                        </Link>
                      </AnimatedMenuItem>
                    ))}
                  </div>
                  <div className="flex gap-4 *:transition-blur *:duration-300 [&:hover>*]:blur-[2px] [&>*:hover]:blur-none">
                    {socialLinks.map((item, i) => (
                      <AnimatedMenuItem key={item.title} order={i + menuItems.length}>
                        <Link
                          className=" font-medium text-primary"
                          href={item.href}
                          title={item.title}
                        >
                          {item.title}
                        </Link>
                      </AnimatedMenuItem>
                    ))}
                  </div>
                </div>
              </AnimatedMenuList>
            </AnimatedMenu>
          </div>
        </div>
      </div>
    </header>
  )
}