Mega Menu

Installation

pnpmnpmyarnbun
pnpm dlx @frontic/ui add mega-menu
Copy

Usage

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

<template>
  <MegaMenu>
    <MegaMenuList>
      <MegaMenuItem>
        <MegaMenuTrigger>
          Category
        </MegaMenuTrigger>
        <MegaMenuContent>
          <!-- Full-width mega-menu panel content -->
        </MegaMenuContent>
      </MegaMenuItem>
    </MegaMenuList>
  </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, viewport-measured dropdowns), the Mega Menu uses position: fixed to span the full viewport width — ideal for store navigation headers with featured images, link sections, and promotional content.

Key differences from NavigationMenu

• Full-width panels: Content spans the entire viewport width using fixed positioning
• Auto top positioning: Automatically calculates the top offset from the root element's bottom edge
• No viewport: Does not use NavigationMenuViewport — content is positioned directly
• Headless trigger: No built-in chevron or indicator — the consumer decides the trigger style

Components

Composable

The useMegaMenu composable is available for advanced use cases:

Copyimport { useMegaMenu } from '@/components/ui/mega-menu'

const { megaMenuTop, updateTop } = useMegaMenu()

• megaMenuTop — Reactive ref with the calculated top position
• updateTop() — Recalculate the top position (useful for sticky headers)