Design Exploration · Resources Nav

Megamenu Variations

Eight directions. Same content, same nav — exploring layout, density, icons, colour, and depth.

01Featherlight

No icons. Section labels at rest weight. Arrow materialises on hover and slides in from the left. Precise, restrained — Linear / Vercel energy.

02Described

Icon + title + one-line caption per item. 2 wide columns. Icon tints brand red on hover. Stripe-grade information density.

03Tiled

Items become clean lift-on-hover cards. Browse in a 4-wide grid, Topics in 3-wide. Visually scannable — Notion / Cron energy.

04Hybrid

Browse stays a text list. Topics becomes a chip cloud. Two interaction languages in one panel — the contrast makes the content type split immediately legible.

05Tonal

Browse columns carry a warm off-white wash, Topics sit on pure white. The section boundary is colour, not a border — subtle but immediately readable.

06Anchored

Two large sections side-by-side. Bold section headers anchored by a thick vertical bar — red for Browse, neutral for Topics. Clear editorial hierarchy.

07Compact

Warm-grey panel. Small icons. Items flip white on hover — reversed from usual. Dense, efficient, keyboard-native feel.

08Grand

No border. Only shadow — four layers of it. Maximum breathing room. Items at 14.5px with generous padding. The arrow moves on hover. Apple / Craft premium.