Default

The panel is part of the bar and grows downward. Move across the triggers to see the direction follow you.

Dropdown

A floating panel that opens under the trigger you are on and slides sideways to the next one. Each item sets its own width.

Cards

Icon cards beside image cards. The panel lines up with its trigger.

Notch

MegaMenuIndicator slides a notch under the active trigger, so the panel points at where it came from.

Centered navigation

The navigation sits in the middle of the bar, whatever the widths of the logo and the buttons. Three columns of 1fr, auto and 1fr do it.

Underlay

A mega menu for the sections and a Menu button for everything else, with sheet-variant="underlay". At desktop width the button opens a panel that stays underneath while the page slides away from it; below that it is a sheet. The page layer follows the menu by sheet-name, so it can live in a layout while the menu sits in the header.

Click to open

open-on="click" holds the panel open until you click again, press Escape or click away. A single trigger is enough, and breakpoint="none" skips the mobile layout.

Anatomy

Import all parts and piece them together.

<script setup>
import {
  MegaMenu,
  MegaMenuColumn,
  MegaMenuContent,
  MegaMenuIndicator,
  MegaMenuItem,
  MegaMenuLink,
  MegaMenuList,
  MegaMenuReveal,
  MegaMenuSheet,
  MegaMenuToggle,
  MegaMenuTrigger,
  MegaMenuViewport,
} from "@/components/ui/mega-menu";
</script>

<template>
  <MegaMenu>
    <MegaMenuList>
      <MegaMenuItem>
        <MegaMenuTrigger />
        <MegaMenuContent>
          <MegaMenuColumn>
            <MegaMenuLink />
            <MegaMenuReveal />
          </MegaMenuColumn>
        </MegaMenuContent>
      </MegaMenuItem>
      <MegaMenuItem>
        <MegaMenuLink />
      </MegaMenuItem>
      <MegaMenuIndicator />
    </MegaMenuList>
    <MegaMenuToggle />
    <MegaMenuViewport />
    <MegaMenuSheet />
  </MegaMenu>
</template>

API Reference

Accessibility

Keyboard shortcuts and ARIA behavior.