X Enterprises
nuxt-x-affiliate

Mega Menu

Multi-column dropdown navigation with featured-panel support. Pairs with XAFSiteHeader's nav slot.

Mega Menu

The XAFMegaMenu component renders a multi-column dropdown navigation panel. Designed to live inside the nav slot of <XAFSiteHeader>.

Components

<XAFMegaMenu />

<XAFMegaMenu :columns="[
  {
    title: 'Kitchen',
    items: [
      { label: 'Coffee Makers', href: '/categories/coffee-makers' },
      { label: 'Air Fryers', href: '/categories/air-fryers' },
      { label: 'Blenders', href: '/categories/blenders' },
    ],
  },
  {
    title: 'Outdoor',
    items: [
      { label: 'Grills', href: '/categories/grills' },
      { label: 'Patio Furniture', href: '/categories/patio' },
    ],
  },
]">
  <template #featured>
    <NuxtLink to="/blog/best-of-2026" class="block rounded-lg bg-primary-50 p-4">
      <p class="text-xs font-semibold uppercase text-primary-700">Best of 2026</p>
      <p class="mt-1 font-semibold">Top picks across every category</p>
    </NuxtLink>
  </template>
</XAFMegaMenu>

Props

PropTypeDefaultDescription
columnsMegaMenuColumn[]requiredEach column has a title and an items array of { label, href }
featuredbooleantrueShow the featured panel slot on the right
align'left' | 'right''left'Where to anchor the dropdown panel

Slots

SlotDescription
featuredOptional featured-content panel (e.g. "Best of 2026" promo)

Accessibility

The mega menu is keyboard-navigable:

  • Tab cycles through top-level triggers
  • Enter / Space opens the panel
  • Escape closes the panel and returns focus to the trigger

Each trigger has aria-haspopup="true" and aria-expanded reflects state.

Tips

  • Keep column titles short — they're navigation hints, not headlines.
  • Use the featured slot to highlight time-sensitive content (seasonal promos, "Best of" roundups).
  • For sites with fewer than ~10 nav targets, use a regular dropdown instead — the mega menu is overkill.

AI Context

component: XAFMegaMenu
package: "@xenterprises/nuxt-x-affiliate"
use-when: Multi-column dropdown nav with featured panel — typically inside XAFSiteHeader's nav slot

Site Footer

Site-wide footer with newsletter signup, secondary nav, legal links, social icons, and copyright.

FAQ

Frequently-asked-questions accordion with optional auto-emission of FAQPage schema.org JSON-LD.

Copyright © 2026