API reference

Mega Menu API

Mega menus use top-level items and nested column nodes to render rich dropdown panels from data.

mega menu types

interface MegaMenuSchema {
  id: string;
  items: MegaMenuItem[];
}

interface MegaMenuItem {
  id: string;
  label: string;
  href: string;
  icon?: string;
  dropdownIcon?: string;
  megaMenu?: {
    firstColumn: MegaMenuColumnNode[];
    secondColumn?: MegaMenuColumnConfig;
    thirdColumn?: MegaMenuColumnConfig;
  };
}

interface MegaMenuResponsiveOptions {
  enabled?: boolean;
  breakpoint?: number;
  toggleLabel?: string;
  closeLabel?: string;
  menuLabel?: string;
  submenuClosedIcon?: string;
  submenuOpenIcon?: string;
  expandMultiple?: boolean;
}

interface MountMegaMenuOptions {
  schema: MegaMenuSchema;
  prefix?: string;
  trigger?: "hover" | "click";
  columnTrigger?: "hover" | "click";
  isAnimation?: boolean;
  responsive?: boolean | MegaMenuResponsiveOptions;
}

type MegaMenuPropsOptions = Omit<MountMegaMenuOptions, "schema">;
type MegaMenuProps = { schema: string } & MegaMenuPropsOptions;

Schema example

A top-level item becomes a dropdown when it includes a megaMenu object with at least one first-column node.

mega-menu.ts

const schema = createMegaMenu({
  id: "site-nav",
  items: [
    {
      id: "solutions",
      label: "Solutions",
      href: "/solutions",
      megaMenu: {
        firstColumn: [
          {
            id: "teams",
            label: "Teams",
            items: [
              {
                id: "engineering",
                label: "Engineering",
                items: [
                  { id: "docs", label: "Docs", href: "/docs" }
                ]
              }
            ]
          }
        ]
      }
    }
  ]
});

Triggers

trigger controls top-level open behavior. columnTrigger controls how first and second column choices update dependent columns.

Responsive options

responsive can be true for the default mobile breakpoint, or an object with labels, submenu icons, and expandMultiple for mobile accordion behavior.

Adapter props

MegaMenuPropsOptions and MegaMenuProps mirror mount options for React, Vue, Angular, or custom wrappers.