Mega menu

Enterprise Commerce features a versatile mega menu component that enhances navigation and provides users with quick access to various sections of your online store. This mega menu is highly customizable and can be tailored to fit your specific needs and branding.

​

Structure and Schema

The mega menu is built using a flexible schema that allows for nested navigation items and different submenu styles. The NavItem interface defines the structure of each menu item:

interface NavItem {
  text: string
  href?: string
  submenu?: {
    variant: "text-grid" | "image-grid" | "text-image-grid"
    items: NavItem[]
  }
}

Each NavItem can have a text label, an optional link (href), and an optional submenu. The submenu can be displayed in different variants:

• Text Grid: A grid layout displaying text links for subcategories.
• Image Grid: A grid layout showcasing images with corresponding text links.
• Text-Image Grid: A combination of text links and image links.

You can adjust the data in app/layout.tsx file.