Mega Menu
Full-width dropdown panels attached to a navbar. Covers column-grid, featured image, icon-list, tabbed, and grouped-link patterns with Alpine.js hover + focus management.
Click any top-level trigger to open its panel. Panels close on outside click, Escape key, or when another trigger is opened. The x-data root on the navbar tracks a single active string — only one panel is open at a time.
1. Icon + Description — 3-Column Grid
The most common SaaS pattern: grouped columns, each item has an icon, label, and one-liner. Keyboard users can tab through items; Escape closes the panel.
2. Featured Image Column
Adds a right-hand featured column — useful for promoting a blog post, case study, or seasonal campaign alongside functional links. The feature column is a fixed-width fourth column outside the link grid.
3. Tabbed Panel
When a single trigger reveals many categories, a left-rail tab strips the panel into scannable sections. The active tab is tracked separately from the open/close state so it persists across opens.
4. Grouped Links — Simple
When items don't need individual descriptions, a compact grouped-link layout is faster to scan. Good for sitemaps with many destinations (20+ links across 3–4 groups).
5. Dark Surface
Apply .mm-nav--dark to the navbar and .mm-panel--dark to each panel. Token values swap; no other structural changes needed.
6. States & Edge Cases
Panel loading skeleton
Single-column panel — 5 or fewer items
When there are <6 items total, a single column reads better than a sparse grid.