Flowing menu

Navigation 85

About

Flowing menu

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

Code

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

Usage.tsx

import React, { useState, useEffect } from 'react';
import { FlowingMenu } from "@/components/ui/flowing-menu";

const demoItems = [
  { link: '#mojave', text: 'Mojave', image: 'https://cdn.21st.dev/assets/mirror/3e/3e7b43f21605763d293748f12efd49900b2be79b63a084bec6b03d17c6174c07.jpg' },
  { link: '#sonoma', text: 'Sonoma', image: 'https://cdn.21st.dev/assets/mirror/b0/b0ff23abce0eeaed39ae25f0c0d64975e106a34b95bdedca331e6386e2149d93.jpg' },
  { link: '#monterey', text: 'Monterey', image: 'https://cdn.21st.dev/assets/mirror/fb/fb2cd1799bcc53da7a26d959f41db367df36b5d2a69343fe8923964b87fc283e.jpg' },
  { link: '#sequoia', text: 'Sequoia', image: 'https://cdn.21st.dev/assets/mirror/39/39689c4e1550da31672252339c548f7312906a1507bae928bf61aa86cb2b736c.jpg' }
];

const FlowingMenuDemo = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDarkMode]);

  return (
    <>
      <style jsx global>{`
        @keyframes marqueeScroll {
          0% {
            transform: translateX(0%);
          }
          100% {
            transform: translateX(-50%);
          }
        }

        .animate-marquee {
          animation: marqueeScroll 25s linear infinite;
        }
      `}</style>

      <div className="flex flex-col w-full min-h-screen justify-center items-center bg-gray-100 dark:bg-neutral-900 p-4 transition-colors duration-300">
    

        <div
          className="relative shadow-xl rounded-lg overflow-hidden"
          style={{ height: '600px', width: '100%', maxWidth: '450px' }}
        >
          <FlowingMenu items={demoItems} />
        </div>
      </div>
    </>
  );
};

export { FlowingMenuDemo };