Mega Menu

Purpose

The MegaMenu is a wide, multi-column dropdown for sites with deep navigation hierarchies. Unlike a simple dropdown, it reveals multiple grouped link sets simultaneously — letting users see all of "Destinations" at once without drilling through sub-menus.

On kuoni.co.uk, a MegaMenu would serve:

• Destinations — columns by region: Africa, Indian Ocean, Asia, Americas, Europe
• Holiday types — columns: Luxury, Safari, Beach, Ski, Honeymoon, Family
• Inspiration — columns: Editorial picks, Guides, Expert advice

Items without sub-columns render as simple nav links. Items with columns configured open a full-width panel on hover (desktop) or click (any pointer).

Static rendering note: The MegaMenu is interactive ('use client') and requires hover/click state to open. The preview above shows a static mockup of the open state. In your application, hover a "Destinations"-type nav item to open the panel.

Usage

Reach for MegaMenu when a top-level nav section (like "Destinations") has too many sub-items to fit a simple dropdown legibly — grouping them into headed columns lets users scan an entire category at once. For a nav item with only a handful of links, a simple link (no panel) is enough; reserve MegaMenu for genuinely deep hierarchies.

MegaMenu is triggered from an item inside the site's NavBar — it is not a standalone nav bar itself. On mobile, it does not render a panel at all; navigation instead collapses into the NavBar's built-in drawer pattern.

Anatomy

Variants

Links only

The simplest mega menu — columns of grouped links, no featured cards.

<MegaMenu
  items={[
    {
      label: 'Destinations',
      columns: [
        {
          heading: 'Africa',
          links: [
            { label: 'Kenya', href: '/destinations/kenya' },
            { label: 'Tanzania', href: '/destinations/tanzania' },
            { label: 'South Africa', href: '/destinations/south-africa' },
          ],
        },
        {
          heading: 'Indian Ocean',
          links: [
            { label: 'Maldives', href: '/destinations/maldives' },
            { label: 'Seychelles', href: '/destinations/seychelles' },
            { label: 'Mauritius', href: '/destinations/mauritius' },
          ],
        },
        {
          heading: 'Asia',
          links: [
            { label: 'Japan', href: '/destinations/japan', badge: 'New' },
            { label: 'Sri Lanka', href: '/destinations/sri-lanka' },
            { label: 'India', href: '/destinations/india' },
          ],
        },
      ],
    },
    { label: 'Offers', href: '/offers' },
    { label: 'Inspiration', href: '/inspiration' },
  ]}
/>

---

With featured card

Add a featured object to a column to render an editorial image card alongside the link lists.

<MegaMenu
  items={[
    {
      label: 'Destinations',
      columns: [
        {
          featured: {
            label: 'Destination of the month: Japan',
            description: 'Cherry blossoms and hidden ryokans',
            href: '/destinations/japan',
            image: {
              alt: 'Cherry blossom avenue at a Kyoto temple',
            },
          },
        },
        {
          heading: 'Asia',
          links: [
            { label: 'Japan', href: '/destinations/japan' },
            { label: 'Sri Lanka', href: '/destinations/sri-lanka' },
          ],
        },
      ],
    },
  ]}
/>

States

Best practices

Props

MegaMenu

NavItem shape

PanelColumn shape

Accessibility

Navigation landmarks

<nav aria-label="Primary navigation with mega menu">
  <ul role="menubar">
    <li role="none">
      <button role="menuitem" aria-haspopup="true" aria-expanded={isOpen}>
        Destinations
      </button>
    </li>
  </ul>
</nav>

• role="menubar" on the nav list + role="menuitem" on each nav item follow the WAI-ARIA Menu pattern
• aria-haspopup="true" on items with panels signals that a sub-menu will open
• aria-expanded announces open/closed state to screen readers

Keyboard interaction

Mobile

On mobile, the MegaMenu renders nav items as flat links without panels. Use the NavBar component's built-in mobile drawer for mobile navigation — the MegaMenu is a desktop-only component.

Related components

• Navigation — MegaMenu panels are triggered from items inside the site's NavBar; the two are used together, not interchangeably.
• Drawer — the pattern NavBar falls back to for mobile navigation, replacing the desktop-only MegaMenu panel.