MegaMenu

Domain

Compound component for hover-activated mega menus. Composed of MegaMenu.Root, Trigger, Panel, Section, Item, Footer, and FeaturedCard sub-components. Use useMegaMenu() to share open/close state across multiple menus. Includes an invisible hover bridge that prevents the gap between the trigger and panel from closing the menu.

Preview

Code

<MegaMenu.Root id="product" openId={openId} onOpen={open} onScheduleClose={scheduleClose}>
  <MegaMenu.Trigger label="Product" isOpen={openId === 'product'} />
  {openId === 'product' && (
    <MegaMenu.Panel id="product" onOpen={open} onScheduleClose={scheduleClose} width="w-[560px]">
      ...
    </MegaMenu.Panel>
  )}
</MegaMenu.Root>

Preview

Code

<MegaMenu.Section label="Resources">
  <div className="grid grid-cols-2 gap-0.5">
    {items.map((item) => <MegaMenu.Item key={item.label} {...item} iconVariant="neutral" />)}
  </div>
</MegaMenu.Section>

MegaMenu

Product menu (with FeaturedCard)

Resources menu (2-column grid)

Navigation