# Megamenu

> Use when you need to display a large number of links in a single menu.

- Skill: `thedaviddias/megamenu` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add thedaviddias/megamenu`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thedaviddias/megamenu/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: thedaviddias (https://skillmd.com/u/thedaviddias)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/thedaviddias/megamenu

---


# Megamenu

Display a large number of links in a single menu

## What it solves

**Megamenu** is a large, multi-column dropdown panel that expands from a navigation bar to reveal a structured collection of links, categories, and sometimes promotional content. Unlike standard dropdown menus, megamenus use the full or near-full width of the page to organize many navigation options at once.
Megamenus help users scan large navigation structures without repeated clicking, making them a staple on enterprise, e-commerce, and content-heavy websites.

## When to use

Use **Megamenu** to **expose a large set of categorized navigation options in a single, scannable panel**.
**Common scenarios include:**
- E-commerce sites with dozens of product categories and subcategories
- Enterprise platforms with many features organized by domain
- University or government sites with extensive departmental navigation
- News portals with numerous editorial sections and subsections
- SaaS products with complex feature sets needing organized access

## When to avoid

- Sites with fewer than 10-15 total navigation links (a simple dropdown suffices)
- Mobile-only applications where screen width is insufficient
- Single-purpose landing pages with minimal navigation needs
- Sites where simplicity and speed-of-access are paramount over breadth
- When analytics show users prefer search over browsing categories

## Implementation workflow

1. Confirm the pattern matches the problem and constraints before copying the example.
2. Start from the anatomy and examples in `references/pattern.md`, then choose the smallest viable variation.
3. Apply accessibility, performance, and interaction guardrails before layering visual polish.
4. Use the testing guidance to verify behavior across keyboard, screen reader, responsive, and failure scenarios.

## Accessibility guardrails

**Do's ✅**
- Use `aria-haspopup="true"` and `aria-expanded` on trigger buttons
- Support keyboard navigation: Enter/Space to open, Escape to close, Arrow keys to move between items
- Include category headings as non-interactive labels (`role="presentation"` or heading elements)
- Ensure all links are reachable via Tab key within the open panel
- Close the panel when focus leaves the megamenu entirely
**Don'ts ❌**
- Don't open the megamenu only on hover without a click/keyboard alternative
- Don't trap focus inside the panel permanently — allow Tab to leave and close the menu
- Don't use custom roles incorrectly (avoid `role="menu"` unless implementing full menu keyboard pattern)

## Performance guardrails

### Target Metrics
- **Panel render:** < 100ms from trigger activation to visible panel
- **Hover intent delay:** 200-300ms to prevent accidental triggers
- **Animation:** 200ms at 60fps for open/close transitions
- **DOM nodes:** Minimize — lazy render panel content only on first open
- **Bundle size:** < 5KB for megamenu component logic
### Optimization Strategies
**Lazy Render Panel Content**
```javascript
const [hasOpened, setHasOpened] = useState(false);
const open = () => { setHasOpened(true); setIsOpen(true); };
// Only render panel DOM after first open
{hasOpened && }
```

## Common mistakes

### No Hover Intent Delay
**The Problem:**
The megamenu opens instantly on mouse enter, causing accidental triggers as users move across the navigation bar.

**How to Fix It:**
Add a 200-300ms hover intent delay before opening. Use a timer that cancels if the mouse leaves the trigger before the delay completes.

### Panel Closes When Moving Mouse to It
**The Problem:**
A gap between the trigger and the panel causes `mouseleave` to fire on the trigger before `mouseenter` fires on the panel, closing the menu.

**How to Fix It:**
Use a shared close delay (300ms) that is cancelled when the mouse enters the panel. Alternatively, create an invisible "bridge" element connecting the trigger to the panel.

### No Keyboard Navigation
**The Problem:**
Users can only access the megamenu with a mouse. Keyboard users cannot open, navigate, or close the panel.

**How to Fix It:**
Support Enter/Space to toggle, Escape to close, and Arrow keys or Tab to navigate between links. Return focus to the trigger on close.

## Related patterns

- https://uxpatterns.dev/patterns/navigation/hambuger-menu
- https://uxpatterns.dev/patterns/navigation/navigation-menu
- https://uxpatterns.dev/patterns/navigation/sidebar

---

For full implementation detail, examples, and testing notes, see `references/pattern.md`.

Pattern page: https://uxpatterns.dev/patterns/navigation/megamenu