Motion Menu

Navigation 10

About

MotionMenu is an interactive navigation component that uses smooth animations and directional hover effects to create a dynamic, engaging menu experience.

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

Code

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

Usage.tsx

import { Component } from "@/components/ui/motion-menu";

const demoItems = [
  { link: "#", text: "Mojave", image: "https://cdn.21st.dev/assets/mirror/bf/bfe039363c060dd56e041d0c886c66d63338a3fe08cb40783831e85a27057fd8.jpg" },
  { link: "#", text: "Sonoma", image: "https://cdn.21st.dev/assets/mirror/f0/f047e082fe67b5f4f001c21346a99753b2ff5aaa77e775ec4d109accba73378a.jpg" },
  { link: "#", text: "Monterey", image: "https://cdn.21st.dev/assets/mirror/d5/d5885303071c9378f369f3f4ea0464c4d42d6d97ee56b54efdc1bb68596cb5b4.jpg" },
  { link: "#", text: "Sequoia", image: "https://cdn.21st.dev/assets/mirror/25/257fdf5727ef83b97cee31a7449fd52caf7bd19da66e2834ee487a6680e43b32.jpg" },
];

export default function DemoOne() {
  return (
    <div className="w-screen h-[600px]">
      <Component
        items={demoItems}
        speed={15}
        textColor="#ffffff"
        bgColor="#060010"
        marqueeBgColor="#ffffff"
        marqueeTextColor="#060010"
        borderColor="#ffffff"
        className="w-full h-full"
      />
    </div>
  );
}