Menu Design
Menu design decides what shoppers find, how fast, and what they believe about your catalog. Here's how the main patterns compare — and when each one wins.
Menu Design
Menu design is how a site's navigation structures choices — depth, grouping, and labels — to guide shoppers to products.
Menu design is the structural and visual layer of navigation: how categories are nested, how labels are phrased, whether the menu is a mega-panel or a hamburger, and how items are grouped (by product type, by audience, by use case, by price tier). Each choice changes both discoverability — how quickly a shopper finds the SKU they want — and perception — what the menu implies about catalog breadth, specialism, and brand confidence.
As a branch of choice architecture, menu design is one of the highest-leverage surfaces on an e-commerce site: it is touched by almost every session and re-renders on every page.
The core tension in menu design is breadth versus depth. A flat menu (8-12 top-level items) makes everything one click away but overwhelms the eye and dilutes hierarchy. A nested menu hides options behind hover or tap, reducing cognitive load but adding friction for shoppers who don't know where their product lives in your taxonomy.
Categorization is the second axis. Grouping by product type (Tops, Bottoms, Outerwear) suits shoppers who know what they want. Grouping by audience (Women, Men, Kids) or by occasion (Workwear, Weekend, Travel) suits browsers and gift-buyers. Most Shopify stores end up with a hybrid — audience at level one, product type at level two — because it serves both intents without doubling the menu.
menu_efficiency = product_finds / (clicks_to_product * menu_items_shown)
product_finds
Successful product views
Sessions where the shopper reached a product detail page via the menu.
clicks_to_product
Average clicks to PDP
Mean number of menu interactions between landing and the product page.
menu_items_shown
Items visible at top level
Number of links and category headers visible in the primary menu.
A Shopify apparel store reworks its menu from 14 top-level items to 7, with one nested level. Successful PDP arrivals via the menu rise from 4,200 to 5,100 per week; average clicks to PDP fall from 2.6 to 2.1.
Before — product_finds: 4200
Before — clicks_to_product: 2.6
Before — menu_items_shown: 14
After — product_finds: 5100
After — clicks_to_product: 2.1
After — menu_items_shown: 7
→ Before: 115.4. After: 346.9 — a 3x lift in menu efficiency.
Cutting top-level items and adding a thin second layer roughly tripled the menu's contribution per interaction. The metric is directional — useful for comparing menu variants, not as an absolute KPI.
Mega-menu vs hamburger is the most visible decision. Mega-menus expose 30-80 links on hover, ideal for catalogs above ~150 SKUs where category browsing is a real intent. Hamburger menus on desktop signal a thin or curated catalog — fine for a single-line beauty brand, wrong for a 12-collection apparel store. On mobile, both collapse to a drawer, so the desktop trade-off matters less than the labels inside.
Menu pattern benchmarks — typical performance ranges for DTC catalogs
| Menu pattern | Top-level CTR | Avg. clicks to PDP | Best-fit catalog size |
|---|---|---|---|
| Flat horizontal (8-12 items) | 32-40% | 1.8-2.2 | 20-80 SKUs |
| Nested dropdown (2 levels) | 38-46% | 2.0-2.5 | 80-300 SKUs |
| Mega-menu with imagery | 44-55% | 1.9-2.3 | 150-2,000 SKUs |
| Desktop hamburger | 18-26% | 2.4-3.1 | <40 SKUs or single-collection |
| Audience-first hybrid | 40-50% | 2.1-2.6 | Multi-audience apparel / beauty |
Treat these ranges as starting points, not targets. A mega-menu with imagery beats a plain dropdown on a beauty store where the visual hint matters; the same pattern underperforms on a hardware catalog where shoppers scan text labels faster than thumbnails. Always test menu variants against your own funnel, not against a benchmark.
Menu design FAQ
For most catalogs under 300 SKUs, 5-8 top-level items hits the sweet spot. Above 8, top-level CTR flattens because shoppers stop scanning. Under 5, you usually need a second-level dropdown anyway to expose the real categories.
Group by audience (Women/Men/Kids) when shoppers self-identify and the product range overlaps across groups. Group by product type when intent is search-like and the audience is uniform. A hybrid — audience at level one, product type at level two — works for most multi-audience apparel and beauty brands.
If your catalog has more than ~150 SKUs across 4+ collections, yes. Mega-menus typically lift top-level CTR by 5-10 percentage points over plain dropdowns because they preview the catalog and short-circuit one click. Below that catalog size, a simple nested dropdown converts as well at lower build cost.
Usually, yes — desktop hamburgers cut top-level CTR roughly in half because they hide categories behind an extra click. Reserve them for very small or single-collection catalogs, or for editorial brands where the homepage does the merchandising and the menu is secondary.
Menu design is one branch of choice architecture — the discipline of structuring options so people decide faster and better. The menu sets the first-order choice set; product listing pages, filters, and badges handle the second-order narrowing inside that set.
Descriptive labels ("Skincare", "Running shoes") almost always win on CTR because they match shoppers' search vocabulary. Branded or clever labels ("The Edit", "Essentials") cost discoverability and only earn their place when the brand voice is a core part of the buying decision.
Keep your underlying collection URLs stable and test only the menu's structure, labels, and ordering — not the destinations. Tools like Metricuno let you A/B test menu variants client-side so crawlers still see the canonical menu and link equity isn't disturbed.
The structure should match, but the surface differs. Desktop can afford a mega-menu or wide dropdown; mobile collapses to a drawer where depth costs more taps. Keep the taxonomy identical so the mental model carries across devices, and prune lower-priority links from the mobile drawer if it scrolls more than one screen.
Audit the menu every time the catalog shifts by more than ~20% (new collection launch, category retirement) and after any major traffic-source change. Outside those triggers, a yearly review using session-level click data is enough — menus shouldn't churn, because shoppers learn them.
Cutting top-level items down to 5-7 and moving the rest into a thin second level. It almost always lifts top-level CTR, reduces decision time, and clarifies the catalog's shape — without removing any destinations. It's the closest thing to a free win in menu design.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.