10.1k

Mega Menu

PreviousNext

Full-width dropdown navigation menu for mega-menu panels that span the viewport width.

<script setup lang="ts">
import {
  MegaMenu,
  MegaMenuContent,
  MegaMenuItem,
  MegaMenuLink,
  MegaMenuList,
  MegaMenuTrigger,
  MegaMenuViewport,
} from '@/components/ui/mega-menu'
</script>

<template>
  <MegaMenu class="min-h-[280px]">
    <MegaMenuList>
      <MegaMenuItem>
        <MegaMenuTrigger class="rounded-md px-3 py-2 text-sm font-medium hover:bg-accent">
          Shop
        </MegaMenuTrigger>
        <MegaMenuContent class="border-t p-6 shadow-lg">
          <div class="mx-auto max-w-3xl">
            <div class="grid grid-cols-3 gap-6">
              <div>
                <h4 class="mb-3 text-sm font-semibold">
                  Clothing
                </h4>
                <div class="flex flex-col gap-2">
                  <MegaMenuLink class="text-sm text-muted-foreground hover:text-foreground">
                    T-Shirts
                  </MegaMenuLink>
                  <MegaMenuLink class="text-sm text-muted-foreground hover:text-foreground">
                    Jackets
                  </MegaMenuLink>
                  <MegaMenuLink class="text-sm text-muted-foreground hover:text-foreground">
                    Pants
                  </MegaMenuLink>
                </div>
              </div>
              <div>
                <h4 class="mb-3 text-sm font-semibold">
                  Accessories
                </h4>
                <div class="flex flex-col gap-2">
                  <MegaMenuLink class="text-sm text-muted-foreground hover:text-foreground">
                    Watches
                  </MegaMenuLink>
                  <MegaMenuLink class="text-sm text-muted-foreground hover:text-foreground">
                    Bags
                  </MegaMenuLink>
                  <MegaMenuLink class="text-sm text-muted-foreground hover:text-foreground">
                    Sunglasses
                  </MegaMenuLink>
                </div>
              </div>
              <div>
                <h4 class="mb-3 text-sm font-semibold">
                  Footwear
                </h4>
                <div class="flex flex-col gap-2">
                  <MegaMenuLink class="text-sm text-muted-foreground hover:text-foreground">
                    Sneakers
                  </MegaMenuLink>
                  <MegaMenuLink class="text-sm text-muted-foreground hover:text-foreground">
                    Boots
                  </MegaMenuLink>
                  <MegaMenuLink class="text-sm text-muted-foreground hover:text-foreground">
                    Sandals
                  </MegaMenuLink>
                </div>
              </div>
            </div>
          </div>
        </MegaMenuContent>
      </MegaMenuItem>

      <MegaMenuItem>
        <MegaMenuTrigger class="rounded-md px-3 py-2 text-sm font-medium hover:bg-accent">
          Brands
        </MegaMenuTrigger>
        <MegaMenuContent class="border-t p-6 shadow-lg">
          <div class="mx-auto max-w-3xl">
            <div class="grid grid-cols-2 gap-4">
              <MegaMenuLink class="rounded-md border p-4 text-sm font-medium hover:bg-accent">
                Nike
              </MegaMenuLink>
              <MegaMenuLink class="rounded-md border p-4 text-sm font-medium hover:bg-accent">
                Adidas
              </MegaMenuLink>
            </div>
          </div>
        </MegaMenuContent>
      </MegaMenuItem>
    </MegaMenuList>

    <MegaMenuViewport />
  </MegaMenu>
</template>

Installation

pnpm dlx @frontic/ui add mega-menu

Usage

<script setup lang="ts">
import {
  MegaMenu,
  MegaMenuContent,
  MegaMenuItem,
  MegaMenuLink,
  MegaMenuList,
  MegaMenuTrigger,
  MegaMenuViewport,
} from '@/components/ui/mega-menu'
</script>

<template>
  <MegaMenu>
    <MegaMenuList>
      <MegaMenuItem>
        <MegaMenuTrigger>
          Category
        </MegaMenuTrigger>
        <MegaMenuContent>
          <!-- Flyout panel content — teleports to MegaMenuViewport -->
        </MegaMenuContent>
      </MegaMenuItem>
    </MegaMenuList>

    <!-- Full-width flyout area — content renders here -->
    <MegaMenuViewport />
  </MegaMenu>
</template>

About

The Mega Menu component provides full-width dropdown panels for navigation, built on reka-ui NavigationMenu primitives.

Unlike the standard NavigationMenu (which renders compact, content-sized dropdowns), the Mega Menu uses a viewport-based architecture where MegaMenuContent teleports into a MegaMenuViewport placed at the full-width level — ideal for store navigation headers with featured images, link sections, and promotional content.

Key differences from NavigationMenu

  • Full-width viewport: MegaMenuViewport spans the full width of the MegaMenu root, allowing flyout panels to break out of centered containers
  • Container architecture: MegaMenu is the full-width outer block, the nav bar sits in a centered container inside it, and the viewport renders flyouts below at full width
  • Content teleportation: MegaMenuContent automatically teleports into MegaMenuViewport via reka-ui's built-in mechanism — no manual positioning needed
  • Headless trigger: No built-in chevron or indicator — the consumer decides the trigger style

Components

ComponentDescription
MegaMenuRoot wrapper. Full-width block that contains the nav bar and viewport.
MegaMenuListContainer for menu items.
MegaMenuItemIndividual menu item wrapper.
MegaMenuTriggerTrigger button. Slot-only — add your own chevron or indicator.
MegaMenuContentFlyout panel content. Teleports into MegaMenuViewport when present.
MegaMenuViewportFull-width flyout area placed after the nav bar. Receives teleported content.
MegaMenuLinkLink wrapper with proper navigation semantics.
LabelMenubar