Animated Menu

Navigation

About

Bold, modern, scrollable self contained collapsible menu system with micro and macro animations fully customizable through props

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

Code

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

Usage.tsx

import { StripeMenu, StripeItem } from "@/components/ui/animated-menu-1";


const ITEMS: StripeItem[] = [
  { id: "3d-motion", title: "3D", brand: "SC3D", activeBg: "#222821", activeText: "#E9E7E2", accent: "#FFD166" },
  { id: "web-design", title: "WEB",  brand: "SC3D", activeBg: "#1E1F23", activeText: "#F0EFEA", accent: "#9B5CFF" },
  { id: "data-analytics", title: "DATA",  brand: "SC3D", activeBg: "#1C2127", activeText: "#F5F4F0", accent: "#4DD0FF" },
  { id: "media", title: "MEDIA",  brand: "SC3D", activeBg: "#242A22", activeText: "#EDEBE6", accent: "#FF6F61" },
  { id: "crm-email", title: "EMAIL",  brand: "SC3D", activeBg: "#212225", activeText: "#EEECE7", accent: "#66FFA6" },
];

export default function DemoOne() {
  return (
    <StripeMenu
      items={ITEMS}
      initialIndex={1}
      defaultOpen={true}
      closeOnEnter={true}
      showIndices={true}
      showScope={true}
      rowHeight={96}
      rowHeightActive={144}
      // Swap font if you want
      fontFamily="'Geist', 'Inter Tight', ui-sans-serif, system-ui"
      // Example callbacks
      onChange={(i, item) => console.log("Focus", i, item.id)}
      onEnter={(i, item) => {
        console.log("Enter", item.id);
        // Navigate your router here
      }}
    />
  );
}