Mega Menu

A compositional navigation primitive implementing a trigger-controlled expandable panel for complex multi-column navigation, category exploration, and marketing content. Built with context-driven state orchestration, outside-click dismissal, and keyboard escape handling.

import { MegaMenu } from '@nofinite/nui';

Interactive Preview

Usage

Basic

import { MegaMenu } from '@nofinite/nui';
<MegaMenu>
  <MegaMenu.Trigger>Products</MegaMenu.Trigger>

  <MegaMenu.Content>Content</MegaMenu.Content>
</MegaMenu>

Multi-column layout

<MegaMenu>
  <MegaMenu.Trigger>Solutions</MegaMenu.Trigger>

  <MegaMenu.Content className="grid grid-cols-3 gap-8">
    <Category />
    <Category />
    <Category />
  </MegaMenu.Content>
</MegaMenu>

Rich marketing panel

<MegaMenu>
  <MegaMenu.Trigger>Platform</MegaMenu.Trigger>

  <MegaMenu.Content>
    <Hero />
    <FeatureGrid />
    <CTA />
  </MegaMenu.Content>
</MegaMenu>

MegaMenu.Trigger

Extends React.ButtonHTMLAttributes<HTMLButtonElement>.

MegaMenu.Content

Extends React.HTMLAttributes<HTMLDivElement>.

Variants

MegaMenu supports interaction-based variants.

<MegaMenu />
<MegaMenu.Trigger />
<MegaMenu.Content />

Available variants:

• closed
• open
• trigger-active
• content-visible

Guidelines:

• Use MegaMenu for high-density navigation only
• Avoid using for simple dropdown patterns

Sizes

No intrinsic size variants.
Sizing is consumer-driven via custom class overrides.

Default behavior:

• Trigger: intrinsic content width
• Content: min-width: 480px
• Panel supports responsive overrides

Shapes / Modes

Behavioral modes

• Closed (default)
• Open (context-driven)

Interaction modes

• Toggle click
• Outside click dismissal
• Escape key dismissal
• Trigger focus restoration

Layout modes

• Single column
• Multi-column grid
• Marketing hero panel
• Mixed content navigation

z-dropdown`

• --color-primary
• --fg-default

Shadow and spacing tokens define panel elevation and density.

Accessibility

Implemented:

• aria-expanded on trigger
• aria-controls linkage
• Unique ID generation
• Escape key close + focus restore
• Focus-visible outline
• Outside click dismissal

Limitations:

• No roving tabindex menu navigation
• No arrow-key navigation
• No typeahead navigation
• Role menu without menuitem semantics
• No focus trap

Animation

Entrance animation:

• Scale + translate + fade
• Transform origin anchored to trigger
• Motion respects prefers-reduced-motion

Chevron rotation indicates state transition.

Architectural notes

Key behaviors:

• Context-driven open state
• Compound component pattern
• Ref synchronization between root and trigger
• Document-level listeners for dismissal
• Lazy mount of content (performance)
• ID-based accessibility linkage
• CSS animation entrance for GPU-accelerated motion

Tradeoffs:

• No portal rendering → constrained by stacking context
• Menu positioning not collision-aware
• Outside click detection relies on DOM containment

Best practices

Do

• Use for complex product navigation
• Compose with Grid/Flex for panel structure
• Provide large touch targets inside panel
• Keep trigger labels concise
• Implement responsive content layout

Don’t

• Use as replacement for simple dropdown
• Overload with excessive nested menus
• Place inside overflow-hidden containers
• Depend on default width for mobile layouts
• Mix unrelated navigation categories

API Reference