The job of your menu

Your navigation isn’t a sitemap; it’s a sales assistant. It should take shoppers to money pages (collections and key PDPs) fast, especially on mobile.

Pick 5–7 top-level categories (no more)

Aim for clarity over completeness. Good starting sets:

Fashion

• New In

• Women / Men (or “Shop All” if unisex)

• Clothing

• Shoes

• Accessories

• Sale

• Gifts (optional) / Collections (seasonal)

Jewelry

• New In

• Rings

• Necklaces

• Earrings

• Bracelets

• Personalization / Engraving

• Sale / Gifts

How to group sub-categories

• By use case: “Occasion,” “Work,” “Everyday,” “Wedding.”

• By attribute: size, color, metal/stone, material.

• By price band: “Under €100,” “Under €250.”

• By collection: seasonal drops, collabs.

Keep names plain and consistent. If you need more than two levels, you’re probably over-nesting.

Mega-menu vs. simple dropdown (a quick decision)

Use this rule of thumb:

Choose a mega-menu when…

• A top item has >8 sub-links (e.g., “Clothing” or “Rings”).

• You need visual grouping (e.g., “Gold / Silver / Gemstone” or “Outerwear / Knitwear / Denim”).

• You want a right-rail promo tile for “New In,” “Best Sellers,” “Gifts Under €100,” or a seasonal collection.

Choose a simple dropdown when…

• There are ≤6 sub-links and no imagery needed (e.g., “About,” “Care,” “Lookbook”).

• The category is narrow (e.g., “Sale,” “Gift Cards”).

Implementation notes

• In mega-menus, use columns with short headings and 5–8 links each.

• Reserve one small image tile (not a banner) for a relevant promotion—no carousels.

• Make the entire menu keyboard- and screen-reader-friendly (focus states, aria-expanded).

Mobile patterns that convert

Mobile is the main storefront. Design for two taps to a category:

1. First tap: open the menu (hamburger or “Shop”).

2. Second tap: hit a top category (or a pill) to land on the money page.

Patterns that work

• Top-level pill row (horizontally scrollable) on Home: New In · Clothing · Shoes · Accessories · Sale.

• Accordion lists with clear chevrons; keep tap targets ≥ 44px height.

• Search prominence: search icon in header; consider a sticky search on long scroll.

Avoid

• Hover-dependent menus (don’t exist on touch).

• Deep trees (Category → Sub → Sub-sub). If it’s that deep, link to a landing page with visual tiles instead.

Common mistakes (and what to do instead)

1. Over-nesting

   • Problem: 3–4 layers that bury products.

   • Fix: Flatten: use a collection landing page with tiles and filters.

2. Promo spam inside menus

   • Problem: Banners, carousels, multiple images.

   • Fix: One small, relevant promo tile max (e.g., “Best Sellers”).

3. Mixing actions and categories

   • Problem: “Track Order,” “FAQ,” “Log In” mixed with “Rings.”

   • Fix: Keep commerce categories in the main nav. Move utility links to top bar/footer.

4. Jargon and duplicates

   • Problem: “Capsule,” “Edit,” “Collection,” “Drop” used interchangeably.

   • Fix: Pick one label per concept and stick to it.

5. Alphabetizing by habit

   • Problem: “Accessories” gets buried.

   • Fix: Order by revenue and intent, not alphabet.

6. Image-heavy menus

   • Problem: Slow, janky open/close.

   • Fix: Text-first columns; a single optimized image if needed.

7. Gender gates that block

   • Problem: “Women / Men” forced at the top when most items are unisex.

   • Fix: Start with Shop All / New In / Categories; add gender filters on PLP.

Micro-copy & quick links that help

Add a small “Quick Links” column in mega-menus:

• Best Sellers

• New In

• Essentials / Core

• Gifts Under €100

• Last Chance / Sale

• Size Guide / Ring Sizer

Keep link labels 3 words or fewer.

Performance & accessibility hygiene

• Open/close with CSS + tiny JS, not heavy app scripts.

• Keep focus states visible; trap focus inside the menu while open.

• Prevent layout shift; menu should feel instant.

• Ensure esc closes; backdrop click closes; tab cycles logically.

5-minute nav audit (do this on your phone)

• Two taps to any top category?

• Search reachable in one tap?

• No more than 7 top items?

• Mega-menus only where needed?

• Promo tile ≤1 per mega-menu?

• Tap targets ≥44px?

• No mixed utility links in the shop nav?

If you miss two or more, your best-sellers are probably hidden.

How we approach it (Siteon)

In a full redesign, we:

• Map 5–7 top categories tied to revenue and intent.

• Flatten deep trees into collection landers with tiles.

• Build text-first mega-menus where appropriate; simple dropdowns elsewhere.

• Design mobile first with pill nav + two-tap flows.

• Keep the menu fast, accessible, and easy to maintain.

Want a quick second opinion? We’ll review your menu on mobile and point to three changes that surface best-sellers—free, 5 minutes.