Mega Menu

Mega Menu Schema

Mega menus describe top-level navigation links plus first, second, and third column data for rich dropdown panels.

The minimum

Use createMegaMenu() to author a typed schema. Items with a megaMenu field get a dropdown panel; plain items render as normal links.

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" }
                ]
              }
            ]
          }
        ]
      }
    }
  ]
});

Class overrides

Render options let you plug the generated HTML into your own design system without changing the schema.

classes.ts

renderMegaMenuHtml(schema, {
  navClassName: "site-nav",
  panelClassName: "site-nav-panel"
});

Trigger modes

Set top-level and column interactions independently. Hover is useful for desktop marketing navs; click is safer for app shells and touch devices.

triggers.ts

mountMegaMenu(container, {
  schema,
  trigger: "click",
  columnTrigger: "hover",
  isAnimation: true,
  responsive: {
    enabled: true,
    breakpoint: 1024,
    submenuClosedIcon: "+",
    submenuOpenIcon: "-",
    expandMultiple: false
  }
});

Responsive mobile menu

The same items tree can render a desktop three-column panel and a mobile accordion. Use responsive to set the breakpoint, menu labels, submenu toggle icons, and sibling expansion behavior.