MegaMenu

// @types/react
// @types/react-dom
import React, { useState } from 'react';
import './MegaMenu.css';

interface MegaMenuProps {
  title: string;
  items: {
    column: string;
    link: string;
    text: string;
  }[];
}

const MegaMenu: React.FC<MegaMenuProps> = ({ title, items }) => {
  const [active, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!active);
  };

  return (
    <div className="mega-menu-container" style={{ backgroundColor: '#0A0A0A' }}>
      <button className="mega-menu-title" onClick={handleToggle}>{title}</button>
      {active && (
        <div className="mega-menu-dropdown">
          {items.map((item, index) => (
            <div key={index} className="mega-menu-column">
              <h3>{item.column}</h3>
              <ul>
                <li>
                  <a href={item.link}>{item.text}</a>
                </li>
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default MegaMenu;

Component info

Dependencies

About

A full-width dropdown mega menu with columns and previews, built with React and TypeScript. The menu features a dark background with a black color (#0A0A0A) and offers a range of customization options. It is designed to provide an intuitive and user-friendly experience, with multiple columns and preview sections to help users navigate and find what they need quickly. With its sleek and modern design, the MegaMenu is perfect for websites and applications that require a robust and efficient navigation system. The menu is also optimized for search engines, with SEO-friendly markup and semantics. Whether you're building a new website or upgrading an existing one, the MegaMenu is a great choice for anyone looking to improve their site's navigation and user experience.