MegaMenu

Wide dropdown navigation panel with multi-column content. Closes on outside click or Escape.

ExamplesCodeUsageChangelog

Three-column mega menu

Tailwind v4

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <MegaMenu label="Products" v-model:open="open">
    <!-- Column 1 -->
    <div>
      <p>Platform</p>
      <ul>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Automation</a></li>
        <li><a href="#">Integrations</a></li>
      </ul>
    </div>
    <!-- Column 2 -->
    <div>
      <p>Solutions</p>
      <ul>
        <li><a href="#">Enterprise</a></li>
        <li><a href="#">Startups</a></li>
        <li><a href="#">Agencies</a></li>
      </ul>
    </div>
    <!-- Column 3 -->
    <div>
      <p>Resources</p>
      <ul>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">API Reference</a></li>
        <li><a href="#">Community</a></li>
      </ul>
    </div>
  </MegaMenu>
</template>

Custom trigger slot

Override the default trigger button with your own markup using #trigger.

Tailwind v4

<MegaMenu label="Solutions">
  <template #trigger>
    <button type="button" @click="$emit('update:open', !open)">
      Solutions ▾
    </button>
  </template>
  <div>
    <a href="#">Enterprise</a>
    <a href="#">Small Business</a>
  </div>
</MegaMenu>

Props

Prop	Type	Default	Description
label	string	—	Label text for the default trigger button
open	boolean	false	Controls open state — use with v-model:open

Emits

Event	Payload	Description
update:open	boolean	Fired when the panel should open or close

Slots

Slot	Description
trigger	Override the default trigger button
default	Mega panel content — typically columns of links