Ecom Ideas
  • Homepages & nav
  • Category pages
  • Product pages
  • Cart pages
  • Checkout
  • Site search
  • Internationalization
  • Holiday ideas
  • Featured idea gallery
  • Topical articles
Subscribe

Get daily ideas

LinkedIn
💡
Ecom Ideas
/Home pages & nav
Home pages & nav
/
💻
Desktop navigation
💻

Desktop navigation

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

💡 Ideas and tips

Taxonomy and link styling

‣
Use color to add visual appeal
💡
Most mega menus use just black text links, with top-level categories bold. A pop of color adds visual flair and can help users differentiate between list sections

🔫 Bulletproof Coffee’s orange headings provide a pleasing pop of color that makes it easier to scan sub-links

image

📚 B&N adds a simple colored underline that adds visual appeal

image

🍷 Drizly uses a red stripe to the left of 3rd-level sub-categories to make them easier to identify as sub-links

image
‣
Visually differentiate link sections

🕊️ Free People uses vertical pipes to distinguish different sections (Shop, Brand features, Articles + Advice)

image

🥜 Nuts.com uses vertical pipe and colored headers to add additional differentiation between sections (Categories and Shop By)

image
‣
Use flags to draw attention to New or other featured categories

👓 EyeBuyDirect highlights Polarized Sunglasses as a Popular category

image

🔫 Bulletproof Coffee calls out new product types with a NEW flag

image
‣
Use thumbnails to add visual context

👚 Take advantage of desktop real estate with thumbnail images to add context to list items

image

⌚ D2C brands like MVMT with tightly scoped product catalogs and creatively named product lines can help customers shop by style right from the header flyout

image
‣
Try emojis or illustrated bullets to add clarity to Shop By links

🥛 BlackMilk highlights Shop By Feature links with fun emoji

image

🥛 Emoji menu, zoomed in…

image

🎽 Under Armour emphasizes its New & Featured link with a 🔥 hot emoji

image

💎 Ritani uses illustrated icons to add visual appeal and clarity to sections like Find Your Diamond and Shop By Shape

image

💎  Ritani, zoomed in…

image
‣
🦄 Allow users to jump directly to Shop by Size (esp for SALE)
💡
Certain industries/categories warrant a quick way to “shop by size” — this is ESPECIALLY helpful in Sale and Clearance sections, where in-stock sizes start to disappear

👞 Ted Baker provides quick links within its Outlet menu to shop by size, by gender

image

👠 Famous Footwear includes links to Shop by Width as well as Shop by Size

image

👠 DSW allows users to skip Categories and shop all within the Department by size

image

👶🏽 Carter’s lets you shop by size for children’s clothing

image
‣
Use red type for Sale links

❗Kohl’s styles sale, deals and clearance sections with red type to grab more attention

image
‣
Place “Shop by” or themed categories over a shaded runner

🧘‍♀️ Lululemon lets navigators browse by activity in a shaded runner along the bottom of the flyout — make sure to A/B test or use event tags to track engagement (this pattern may be easy for visitors to overlook)

image

Navandising (merchandising inside your nav)

‣
Test featured products in flyout menu
💡
This is a popular “navandising” tactic — but it’s effectiveness comes down to a number of factors: Design and implementation ⚡Does it help or hinder the user’s ability to choose a category and ultimately make a purchase? (Does it overshadow links?) ⚡Does it drag performance? Merchandising logic ⚡Are you choosing the right products? ⚡Do you have a process or system that optimizes which products are shown over time? ⚡Are featured products guaranteed to be in-stock? ⚡Can suggestions be personalized? ⚡Are you measuring click through (overall and by product) through event tags? ⚡Have you A/B tested it against a regular, text-link only flyout?

🐱 Sanrio promotes featured products in each Category tab’s flyout menu. Some search-and-merchandising platforms allow you to auto-populate these slots with machine learning, or manually pin products to slots

image
‣
🦄  Embed product compare cards

😴 Nectar Sleep’s ‘Mattresses’ mega menu lets you tab through mattress models and compare variants head-to-head with attribute details

image
‣
Give Deals their own flyout menu

☘️ O’Reilly Auto Parts gives its Deals section its own flyout menu

image

👓 Glasses USA’s Sale menu features banners for various Sale sections

image
‣
Give Shop by Brand its own flyout menu

🐶 PetSmart offers a Shop by Brand menu, with the most famous brands featured with logo tiles, and a “Shop all Brands” link to all

image
‣
Give Shop by Color its own flyout menu

🌈 Ruggable provides a stunning way to shop rugs by color family

image
‣
Include a Product Finder / Quiz CTA within the flyout menu

👟 Brooks Running includes a Shoe Finder Quiz in its Mens mega menu

image

🔫 Bulletproof Coffee includes a Quiz CTA in the bottom strip (gray field)

image

🛏️ Helix calls out its mattress finder in the header nav, and in case you missed it, the jelly-bean CTA is repeated in its hero banner

image

🛀 Lush prompts shoppes to “Take the Hair Quiz” (far right banner) — product finders are a great way to collect first party info to better personalize customer experience

image
‣
🦄 Try a “Today’s Offers” promo drawer

🦅 American Eagle Outfitters features Offers in its header menu and opens a drawer on-tap on both mobile and desktop (this may take a sec to load - see animation after this static shot)

image
image

📿 Puravida does similar

image

🥾 Columbia uses a similar tactic, but links from its promotional bar

image

Mobile version, with a different design:

Desktop version:

‣
Test graphic tiles for Shop By links

⚡ Add emphasis to thematic collections with thumbnail images

image
‣
Try an animated tile for featured category

💍 Daniela Draper draws eyeballs to its Cinderella collection with an animated demo. (For web performance, it’s best to use a native looping .webm video vs an animated GIF)

image

👙 Another example from KNIX:

image
‣
Try a bottom-aligned “promo strip” in your flyout

👕 Urban Outfitters slides a promo strip into select sub-menus, where promotions apply (black runner)

image
‣
Try clickbait copy

🎣 Free People evokes curiosity with the copy “I Tried It: I Replaced All My Pants With…”

image

Zoomed in… (if you’re curious, it links to a blog post)

image
‣
Get creative with content blocks

👕 BooHooMan uses 2 graphic banners and a special widget for Offers alongside Category links

image

Zoom:

image

🧸 Melissa & Doug has a tight catalog with fewer links per Category flyout than average — more room for eye-catching hero banners and CTAs!

image
‣
Try an account sign-up nudge

👟 Adidas uses a subtle nudge to evoke curiosity. You click, you get a CTA to join the Adiclub

image

🥾 As a Co-op, REI highlights its membership reward program

image

🐶 Petsmart is another example, promoting its loyalty proram

image
‣
🦄 Try a turnstile header menu

👖 Y/Project takes an avant garde approach to breadcrumb navigation, rolling it into a turnstile-style header menu that flips as you scroll. Any unconventional design pattern is risky — so make sure to user test or A/B test if you try this out

image
‣
🦄 Try attribute filter tabs

🍄 Four Sigmatic embeds attribute chips into its flyout menus for quick pre-filtering of results. It also helps customers understand the key benefits across the product range (GIF loading slow? Jump to the static shot for the gist 👇)

image
image

Mobile view

image

Flyout and responsive behavior

‣
Support 3-level navigation in flyout for large/deep catalogs

🔩 Lowe’s allows users to drill down to third level categories to shorten the purchase journey

image
‣
Make your navigation bar sticky as users scroll

🍷 Home pages, Categories, search results and PDPs can get looooong. Give users easy access to your header nav by making it sticky

image
‣
🦄 Try a floating nav widget

👟 On uses a floating nav bar that contains everything from Shop to Cart

image
‣
Try an editorial spread

👗 Alexander McQueen replicates a magazine editorial with a full page menu takeover on desktop. Hovering over links swaps the hero image (GIF demo below, it may load slow)

image
image

💎 Bvlgari’s menu is also super fly

🫣 Cautions

‣
Don’t hide important links in the promo strip

🍸 Skinny Mixes’ Account, Wishlist and Cart links are near invisible in its promo strip (which can cause what’s known as “banner blindness”)

image

Zoom:

image
‣
Avoid white text for navigation elements

💋 Kylie’s white text links disappear into its hero images

image
‣
Avoid using tabs for 2nd-level categories within the flyout menu

🛋️ Home Depot uses horizontal tabs for its second level of links. It’s very easy for users to overlook that there are 8 more sub-menus to explore under Home Decor, Furniture & Kitchenware

image
‣
Avoid SEO keyword stuffing your menu links

😬 While this is arguably (keyword: arguably) good for SEO, repeating keywords at the front-end of your list items makes it harder for users to scan

image

Back to Home page & nav ideas

👉 Follow on LinkedIn for daily ideas 💡