@veeyaainnovatives/megamenu

A reusable Mega Menu component for React applications with services list support. Perfect for navigation menus with hierarchical service structures.

Installation

npm install @veeyaainnovatives/megamenu --save

Peer Dependencies

This package requires the following peer dependencies:

• react (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-dom (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-bootstrap (^2.0.0)
• react-router-dom (^6.0.0)

Usage

Basic Usage

import { MegaMenu } from '@veeyaainnovatives/megamenu';
import '@veeyaainnovatives/megamenu/styles.css';

function App() {
  const services = [
    {
      id: 1,
      text: 'Architecture',
      sub_services: [
        {
          id: 1,
          text: 'Residential Design',
          description: 'Custom home designs',
          icon: 'fa-regular fa-home',
          slug: 'residential-design'
        }
      ]
    }
  ];

  return (
    <MegaMenu
      services={services}
      loading={false}
      backgroundColor="#ffffff"
    />
  );
}

With React Router Navigation

import { MegaMenu } from '@veeyaainnovatives/megamenu';
import { useNavigate } from 'react-router-dom';

function Navigation() {
  const navigate = useNavigate();
  const [services, setServices] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch services from your API
    fetchServices().then(data => {
      setServices(data);
      setLoading(false);
    });
  }, []);

  return (
    <MegaMenu
      services={services}
      loading={loading}
      backgroundColor="#ffffff"
      onServiceClick={(subService) => {
        navigate(`/services/${subService.slug}`);
      }}
      onViewAllClick={() => {
        navigate('/services');
      }}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | services | Array | [] | Array of service objects with sub_services | | loading | boolean | false | Loading state | | backgroundColor | string | '#ffffff' | Background color of the mega menu | | onServiceClick | function | undefined | Callback when a sub-service is clicked | | onViewAllClick | function | undefined | Callback when "View all Services" button is clicked | | viewAllButtonText | string | 'View all Services' | Text for the view all button | | viewAllButtonVariant | string | 'outline-success' | Bootstrap variant for view all button | | servicesPath | string | '/services' | Path for services page | | showViewAllButton | boolean | true | Whether to show view all button | | className | string | '' | Additional CSS classes for wrapper | | menuClassName | string | '' | Additional CSS classes for menu container | | containerClassName | string | '' | Additional CSS classes for Container | | titleClassName | string | '' | Additional CSS classes for menu title | | itemClassName | string | '' | Additional CSS classes for menu item | | iconClassName | string | '' | Additional CSS classes for item icon | | descriptionClassName | string | '' | Additional CSS classes for item description container | | itemTitleClassName | string | '' | Additional CSS classes for item title | | itemDescClassName | string | '' | Additional CSS classes for item description | | loadingText | string | 'Loading services...' | Text shown during loading | | emptyText | string | 'No services available' | Text shown when no services | | breakpoint | number | 992 | Breakpoint for mobile/desktop switch (px) | | renderServiceTitle | function | undefined | Custom render function for service title | | renderSubService | function | undefined | Custom render function for sub-service item | | renderLoading | function | undefined | Custom render function for loading state | | renderEmpty | function | undefined | Custom render function for empty state |

Service Object Structure

Each service object should have the following structure:

{
  id: Number,              // Unique identifier
  text: String,            // Service title (or use title/name)
  title: String,           // Alternative to text
  name: String,            // Alternative to text
  sub_services: [          // Array of sub-services
    {
      id: Number,          // Unique identifier
      text: String,        // Sub-service title (or use title/name)
      title: String,       // Alternative to text
      name: String,        // Alternative to text
      description: String, // Sub-service description
      icon: String,        // FontAwesome icon class
      slug: String         // URL slug for navigation
    }
  ]
}

Examples

Custom Background Color

<MegaMenu
  services={services}
  backgroundColor="#f5f5f5"
/>

Custom Click Handlers

<MegaMenu
  services={services}
  onServiceClick={(subService) => {
    console.log('Clicked:', subService);
    // Custom navigation logic
  }}
  onViewAllClick={() => {
    console.log('View all clicked');
    // Custom navigation logic
  }}
/>

Custom Rendering

<MegaMenu
  services={services}
  renderServiceTitle={(service, index) => (
    <h2 className="custom-title">{service.text}</h2>
  )}
  renderSubService={(subService, service, serviceIndex) => (
    <div onClick={() => handleClick(subService)}>
      <CustomSubServiceComponent data={subService} />
    </div>
  )}
/>

Without View All Button

<MegaMenu
  services={services}
  showViewAllButton={false}
/>

Responsive Behavior

The component automatically switches between:

• Desktop: Full mega menu with tabs and grid layout
• Mobile (below breakpoint): Simple dropdown menu

The breakpoint can be customized using the breakpoint prop (default: 992px).

Importing Styles

You need to import the CSS file in your application:

import '@veeyaainnovatives/megamenu/styles.css';

Or if using the package's CSS export:

import '@veeyaainnovatives/megamenu/dist/styles.css';

License

MIT