# Mega Menu

> Large navigation menus, mega-menu design, and complex navigation patterns.

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

---


# Mega Menu Design

## When to Use
- 20+ navigation items that can't fit in a simple nav bar
- E-commerce with many categories
- Enterprise apps with many feature areas

## Design
- Full-width or large dropdown panel
- Organized in columns by category
- Category headers as section labels
- Max 3-4 columns
- Featured content or promotions on the right (optional)
- Close on click outside or Escape

## Interaction
- Desktop: hover to open (with 200ms delay to prevent accidental triggers)
- Mobile: convert to accordion or drill-down navigation
- Diagonal tolerance: allow mouse to move diagonally toward submenu

## Rules
1. Keep items scannable (short labels, clear hierarchy)
2. Don't put everything in the mega menu
3. Highlight current section
4. Keyboard navigable (arrow keys, Enter, Escape)
5. Test with screen readers