Menu Design
Menu design controls how shoppers find products and how broad your catalog feels. Here's how flat, nested, mega and hamburger patterns compare — with benchmark ranges for online stores.
Menu Design
The structural and visual design of a site's navigation menus — how categories are grouped, nested, and surfaced to shoppers.
Menu design is the discipline of structuring navigation so shoppers can find what they want with the fewest decisions, while also signalling how broad and curated your catalog is. It covers the architecture (flat vs nested), the surface pattern (top-bar, mega-menu, hamburger, sidebar), and the categorisation logic (by product type, by audience, by use case, or by occasion).
It sits inside the broader discipline of choice architecture: the menu is the first place a visitor experiences the trade-off between breadth and decision cost. A good menu hides complexity until the shopper asks for it; a bad one either buries SKUs three clicks deep or dumps the entire taxonomy on the homepage.
Two structural choices drive most outcomes. The first is depth: a flat menu exposes 8-15 top-level categories on one row, while a nested menu hides sub-categories behind hover or tap interactions. Flat is faster to scan but caps your taxonomy; nested scales to large catalogs but adds a decision step.
The second is the categorisation axis. Grouping by product type (Tops, Bottoms, Shoes) is the default but treats every visitor identically. Grouping by audience (Women, Men, Kids) or by use case (Running, Yoga, Hiking) front-loads segmentation and often lifts category-page conversion by routing intent earlier. The right axis depends on whether shoppers arrive with a job-to-be-done or a product in mind.
T = a + b * log2(n + 1)
T
Decision time
Time the shopper takes to pick a menu item, in seconds.
a
Base reaction time
Fixed overhead before scanning starts (~0.2s on web).
b
Per-choice scan cost
Time added per doubling of options (~0.15s for familiar labels).
n
Visible menu items
Number of options the shopper has to choose between at one level.
A Shopify apparel store debates between a flat 14-item top nav and a grouped 6-item nav with sub-menus.
Flat menu items (n): 14
Grouped menu items (n): 6
a: 0.2
b: 0.15
→ Flat: ~0.79s per decision. Grouped: ~0.62s at the top level, plus a second ~0.5s decision inside the sub-menu = ~1.12s total.
Hick-Hyman predicts the flat menu is faster for shoppers who already know which top-level category they want. The grouped menu only wins when sub-categorisation prevents wrong clicks downstream — e.g. when a shopper picking 'Women' avoids loading three irrelevant product grids.
The pattern you pick interacts with device mix. Mega-menus shine on desktop where hover and wide screens let you preview 20-40 sub-items at once, but they collapse poorly on mobile. Hamburger menus save header space on mobile but cost roughly 10-20% in discoverability for secondary categories — fine for repeat shoppers, costly for paid traffic landing cold.
Typical menu patterns by store type and their conversion-rate impact range
| Store type | Top-level items | Common pattern | Mobile discoverability | CVR delta vs flat baseline |
|---|---|---|---|---|
| Single-category apparel (€1-3M) | 5-8 | Flat top-bar | High (visible) | Baseline |
| Multi-category fashion (€3-10M) | 6-10 | Mega-menu (desktop) + drawer (mobile) | Medium | +3% to +8% |
| Beauty / skincare | 4-7 | Flat + audience filter | High | +1% to +5% |
| Electronics / wide catalog | 8-14 | Nested mega-menu | Low-medium | +5% to +12% |
| Home & furniture | 6-9 | By-room mega-menu | Medium | +4% to +9% |
| Hamburger-only (mobile-first) | any | Hidden drawer | Low | -8% to -15% |
Treat menu design as a testable hypothesis, not a one-off decision. The shopper segments that route through navigation (versus search or PDP-from-ad) are usually 30-50% of sessions, so even a one-percentage-point CVR swing on that cohort moves total revenue. Pull the GA4 path-exploration report for /collections traffic before and after any change and watch bounce rate on the categories you re-grouped.
Menu design FAQs
Almost never. Hiding navigation behind an icon on desktop drops category click-through by 15-25% in most tests. Hamburger is a mobile compromise, not a design aesthetic. Use a visible top-bar or mega-menu on screens wider than 1024px.
Above 12-14 items the menu starts wrapping or shrinking labels below readable size. Hick-Hyman scan time grows logarithmically, so 14 items isn't catastrophic, but the visual fit on a 1280px header usually is. Group beyond 10 unless your categories are short single words.
Mega-menus win for catalogs above ~200 SKUs because they let you preview sub-categories, featured collections and imagery in one hover. Simple nested dropdowns are fine under ~50 SKUs. The crossover point is roughly when your second-level taxonomy has more than 5-6 items per group.
By audience (Women / Men / Kids) when the same product split serves visibly different shoppers and SKUs barely overlap. By product type when shoppers cross-shop across audiences (most beauty, most home). You can also lead with audience and nest product type underneath — common in apparel.
Yes, significantly. Internal links from your global nav pass the most link equity of any link on the site. Categories you put in the menu rank measurably better than equivalent pages buried in the footer or only linked from collections. Treat menu slots as SEO real estate, not just UX.
Run the A/B test client-side after page load so both variants serve the same crawlable HTML to Googlebot. Keep URLs stable — change labels and grouping, not destinations. Measure for at least one full week to capture weekday/weekend behaviour differences.
Keep cart, search and account as separate utility icons in the header, not inside the navigation menu. They are different mental models — utility vs discovery — and shoppers look for them in fixed top-right positions. Mixing them slows both tasks.
On long product listing pages and editorial content, yes — sticky nav lifts category re-engagement by 5-10%. On short pages it costs vertical space for no benefit. Use position:sticky with a slim collapsed variant on scroll rather than the full-height header.
The menu is the first and most consequential choice architecture decision on the site. It frames what the catalog 'is' before any product is seen, sets the default browsing path, and determines how many options the shopper confronts simultaneously. Every downstream filter, sort and merchandising decision inherits from it.
Structural redesign every 18-24 months or when catalog size shifts by more than 30%. Smaller label and ordering tweaks are worth testing quarterly — they're cheap to ship and the data compounds. Don't redesign because it 'feels stale'; redesign because the data shows a bottleneck.
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.