Ecommerce UX
Ecommerce navigation best practices: menus, search and mobile
Ecommerce navigation is every route a shopper uses to find a product: the menu, search, category pages, filters, breadcrumbs and links between products. When it works, people find what they came for and see more of your range. This guide covers how to plan it, build it and test it.
Short answer
Ecommerce navigation is the set of tools a shopper uses to find a product in an online store: the main menu, site search, category pages, filters and sorting, breadcrumbs, related product links and the footer. Good ecommerce navigation groups products the way shoppers think about them, uses short plain labels and keeps the hierarchy shallow.
- Plan categories from evidence: your site search terms, the paths people take and how your market names things.
- Aim for no more than three or four levels from the homepage to a product, and let filters do the rest.
- Write labels a shopper can predict before clicking, in the words customers type into search.
- A product that cannot be found cannot be bought, however good its product page is.
- Card sorts and tree tests find naming problems cheaply, before you build.
What is ecommerce navigation?
Ecommerce navigation is the set of tools a shopper uses to move around an online store and find a product: the main menu, site search, category and subcategory pages, filters and sorting, breadcrumbs, links between related products and the footer. It works when a shopper reaches the right product in as few steps as possible, without having to think about how.
Picture walking into a large supermarket for one item, say almond flour. Is it with baking goods, health foods or the gluten-free shelf? In a real shop you can walk the aisles. Online, a shopper who cannot work out where something lives in a few seconds usually leaves. Navigation is the store assistant who points the way.
That is why navigation is one of the first things Convertica looks at in an ecommerce CRO audit. A product that cannot be found cannot be bought, however good its product page is.
| Type | What it is | Best for |
|---|---|---|
| Horizontal menu bar | Top-level categories across the header | Stores with a small number of clear categories |
| Dropdown menu | A short list of links under a top-level item | Categories with a few subcategories |
| Mega menu | A wide panel showing many subcategories at once, grouped under headings | Large catalogs with deep ranges |
| Hamburger menu | A menu hidden behind an icon, opened with a tap | Mobile, where there is no room for a menu bar |
| Site search | A search field, ideally with suggestions as you type | Shoppers who know what they want |
| Filters and sorting | Options on category and search pages to narrow results | Any category with more products than fit on one screen |
| Breadcrumbs | A trail showing where the page sits in the hierarchy | Deep catalogs and visitors who land from search |
| Contextual links | Related products, alternatives and accessories | Product pages and cart |
| Footer links | Policies, help, secondary categories | Visitors looking for something specific |
How to plan your ecommerce navigation structure
Plan ecommerce navigation by grouping products the way your shoppers think about them, not the way your warehouse or supplier lists them. Start from evidence: what people search for on your site, which paths they take, and how other stores in your market name the same things. Then keep the hierarchy shallow and the labels plain.
-
Read your site search terms
Search terms are your shoppers' own words. They show which products people expect to find, what they call them, and which ones they could not find in the menu. Repeated searches for a product type you sell are a strong sign it needs its own menu entry.
-
Study the paths people take
Use your analytics to see which categories people open, in what order, and where they leave. A category that many visitors open and then leave without clicking a product is usually labeled or grouped wrongly.
-
Look at how your market names things
Shoppers have used other stores before yours, and they bring those expectations with them. Note how the leading stores in your niche name and group categories. You are not copying them, you are borrowing the conventions your shoppers already know.
-
Sort products with real shoppers
A card sort asks people to group product names and label the groups. A tree test asks them to find a product using only your category structure, before any design exists. Both are cheap to run and find naming problems before you build.
-
Keep the hierarchy shallow
Every extra level is another choice that can go wrong. As a rule of thumb, aim for no more than three or four levels from the homepage to a product, and let filters do the work that extra levels would otherwise do.
-
Write short, plain labels
Use the words shoppers use: "Women's running shoes", not a clever collection name. Avoid vague labels such as "Products" or "Solutions", and avoid two labels that could both hold the same item.
How to write navigation labels shoppers understand
Navigation labels work when a shopper can predict what is behind them before clicking. Use the plain name of the product type, in the words your customers type into search, and make sure no two labels could hold the same item. Brand language, internal jargon and vague words make shoppers open menus to find out what they mean.
| Problem | Unclear label | Clearer label |
|---|---|---|
| Vague | Products, Solutions, Shop | The product types themselves: Sofas, Beds, Lighting |
| Brand language | The Comfort Edit | Sofas and armchairs |
| Overlapping | Accessories and Extras | One label, or two that cannot hold the same item |
| Internal jargon | SKU range B, Line 2 | Replacement parts, Starter kits |
| Too long | Everything you need for your morning run | Running |
Collection names and campaign themes still have a place, on the homepage and in promotions. In the menu, plain product names win, because shoppers scan menus for the word they already have in mind.
How to optimize the main menu
To optimize the main menu of an online store, limit the top level to the categories that cover your range clearly, put subcategories in a dropdown or mega menu, order items by importance, and make sure the menu works by click and tap as well as hover. The main menu has little space, so every top-level item has to earn it.
How many top-level links?
Seven top-level items is a rule of thumb you will see repeated often, but nobody can tell you the right number for your store. A small store might need four. A department store might need twelve. What matters is the reason for limiting them: too many equal options slow people down. Use as few as cover your range without forcing shoppers to guess, then check your menu click data and test.
Dropdown or mega menu?
If a top-level category has more than a handful of subcategories, a mega menu usually works better than a long dropdown. It shows the whole category at once, grouped under headings, so shoppers can scan instead of opening nested lists. Keep each mega menu panel organized under clear headings, and resist filling it with promotions that push the links out of sight.
Make it work for every way of opening it
- Open menus on click or tap as well as on hover, because touch screens have no hover.
- Add a short delay before a hover menu closes, so a cursor moving diagonally does not close it by accident.
- Make the top-level item itself a link to its category page, so shoppers who want to browse everything can.
- Let keyboard users open, move through and close the menu, with visible focus.
- Put sale, new and gift items where your data says shoppers look for them, often at the end of the bar or as a highlighted item.
How to design a mega menu that helps people choose
A good ecommerce mega menu is a map of one category, not a second homepage. Group subcategories under a few short headings, list the most popular groups first, keep each column to links that belong together, and give every heading its own link. Use images sparingly, to help people recognize a category, not to advertise. The panel should be scannable in seconds.
- Group by how people shop. By product type for most stores; by room, activity or occasion where that is how customers think.
- Use a few headings. Four to six groups are easier to scan than one long list.
- Lead with what sells. Put the most visited subcategories at the top of each column.
- Link every heading. Headings that are not links frustrate people who click them.
- Include "Shop all". A link to the whole category, for browsers.
- Keep promotions small. One promotional tile at most, so links stay visible.
- Match the mobile menu. The same groups should appear, in the same order, in the mobile menu.
- Watch the height. A panel taller than the screen hides its own bottom rows.
Ecommerce navigation examples by type of store
The right ecommerce navigation depends on the size of your range and how your customers choose. A store with one product needs almost no menu; a department store needs a mega menu, strong search and filters. These patterns are common starting points by store type, to adapt with your own search terms and analytics rather than copy.
| Type of store | Typical menu | What matters most |
|---|---|---|
| Single product or small range | A short bar: the product, how it works, reviews, help | Getting to the product page and its answers fast, not browsing |
| Fashion and apparel | Split by audience first (women, men, kids), then product type, with new and sale | Filters for size, color and fit; visible new arrivals |
| Home and furniture | By room and by product type, often both | Filters for dimensions, material and style; inspiration links |
| Electronics and parts | Deep categories in a mega menu, plus brand | Search by model number and part code; compatibility filters |
| Food and consumables | By product type and by diet or need | Quick reorder for returning customers; bundles and subscriptions |
| Business buyers | By product line and by industry or use | Search, quick order by code, account and reorder links |
Whatever the store type, sale, new arrivals and gift sections often earn a place in the top bar, because many shoppers arrive looking for exactly those. Check your own search terms and menu clicks before you add them.
Use the homepage and category pages to navigate
The homepage and category pages are navigation tools as much as the menu is. The homepage should show your main categories, bestsellers and current promotions as links. Each category page should act as a mini homepage for its range: subcategory tiles at the top, then filters, sorting and products, so shoppers can go deeper or start choosing straight away.
On the homepage, show the categories most of your visitors want, a selection of bestsellers that hints at the breadth of the range, and any sale that is running. Fashion stores often split the very first choice into two or three routes, such as women and men, which makes the first decision easy. The full guide to ecommerce homepage best practices covers the rest of the page.
On category pages:
- Show subcategories as visible tiles or links at the top, with product counts if they help.
- Put the bestselling or most relevant subcategories first.
- Show products on the same page as the subcategories, so people who want to browse can start scrolling.
- Link every product in the category from the category page, directly or through pagination, so shoppers and crawlers can reach them all.
Filters and sorting on category pages
Filters, also called faceted navigation, let shoppers narrow a category by the attributes they care about, such as size, color, price, brand or material. They are essential once a category holds more products than fit on a screen or two. Good filters match how people choose in that category, show how many products each option leaves, and never return an empty page.
- Category-specific filters. Shoes need size and width; sofas need dimensions and fabric. One generic filter set for the whole store misses what matters in each category.
- Counts beside each option. Shoppers can see how many products a filter leaves before they apply it.
- Visible applied filters. Show the active filters at the top of the results with a one-tap way to remove each.
- Sensible sorting. Offer sort by relevance or bestselling, price and newest, and default to the order that sells best.
- Mobile-friendly controls. A filter button that opens a full-screen panel with a clear apply button works well on phones.
- No dead ends. Hide or disable options that would return zero products.
Filters can create a very large number of URLs. Google's guidance on managing crawling of faceted navigation URLs gives two paths:
- If filtered pages do not need to appear in search, block the filter parameters in robots.txt while leaving product pages and the unfiltered category crawlable, or put filters after a
#in the URL, which Google generally does not crawl. - If some filtered pages should appear in search, use the standard
&between parameters, keep filters in a fixed order, and return a 404 for combinations with no results instead of redirecting them.
Google calls rel="canonical" and nofollow on filter links weaker options over the long term than robots.txt. Decide which filtered pages earn a place in search before you launch new filters.
How to optimize site search for ecommerce navigation
Site search is the navigation tool for shoppers who already know what they want, so it should be visible, forgiving and helpful. Show a search field rather than a small icon, suggest products and categories as people type, match synonyms, misspellings and product codes, and turn a no-results page into a set of useful next steps. Search should also lead somewhere that sells.
- Make it visible. An open search field at the top of every page, not an icon that has to be found first.
- Suggest as people type. Autocomplete with product names, categories and popular searches saves typing and corrects spelling early.
- Match how people describe things. Shoppers search by product name, by type ("waterproof jacket"), by use ("hiking"), by problem ("drafty window") and by part number with or without the brand. Map synonyms so all of these find the same products.
- Tolerate mistakes. Correct common misspellings automatically or offer "Did you mean".
- Fix the no-results page. Suggest related categories, popular products and a way to contact you, instead of a blank page.
- Read your search data every month. Searches with no results, or with results nobody clicks, are a list of missing products, missing synonyms and labeling problems.
Search results pages are also a place to sell, not only to list. In Convertica's dScryb test, adding call-to-action buttons to search results, showing each result's access level and sending users straight to the store page raised call-to-action clicks from the search results page by 24% and paid membership sign-ups by 49.4%, desktop and mobile combined.
+49.4%
Paid membership sign-ups, 17-day A/B test
Navigation on product pages: breadcrumbs and related products
On a product page the shopper is close to buying, so navigation has a narrower job: help them confirm this is the right product, offer a better-fitting alternative if it is not, and add what goes with it. Breadcrumbs show where the product sits so visitors from search can step back to the category. Related links should be few and relevant.
- Breadcrumbs at the top of the page, each level a link: Home, Category, Subcategory, Product.
- Alternatives such as the same product in another brand, size or price point, for shoppers who are not convinced.
- Accessories and "bought together" items that genuinely go with the product, to raise order value.
- A short comparison table when shoppers often weigh two or three similar products.
- A clear route back to the filtered category the shopper came from, with their filters still applied.
Keep it restrained. A product page crowded with carousels of other products pulls attention away from the add to cart button, which is the one link that matters most on that page.
Mobile ecommerce navigation best practices
Mobile ecommerce navigation has to work in a small space, with a thumb, often on a slow connection. Use a hamburger menu labeled Menu, keep the search field visible at the top, show main categories on the homepage itself, make tap targets large and well spaced, and keep the most used actions within easy reach of the thumb. Check every change on a real phone.
- The menu icon has a visible label, such as Menu
- Search is visible at the top of the page or one tap away
- Main categories appear on the homepage, not only inside the menu
- Menu levels open in place or slide in, with an obvious way back
- Tap targets are large enough and spaced so neighbors are not hit by mistake
- Filters open in a full-screen panel with a clear apply button
- Key actions sit where a thumb can reach them
- A sticky header or bottom bar does not cover too much of a small screen
Thumb reach is not a small detail. In Convertica's Empire Flippers case study, form analytics split by device showed phone users struggling to reach controls near the top of the screen, and a follow-up change moved those controls within easy thumb reach.
Mobile and desktop visitors also behave differently enough that one navigation change can help on one device and do nothing on the other. Read your results by device. The guide to mobile conversion optimization goes further.
Should you remove navigation from checkout?
Many stores remove or reduce the main navigation once a shopper enters checkout, leaving the logo, a help link and the steps of the checkout itself. The aim is to keep attention on finishing the order. Keep a clear way back to the cart and visible contact details, so shoppers who need to check something do not feel trapped and leave.
Whether a stripped-back checkout helps your store is something to test. The full guide to checkout optimization covers the rest of the checkout.
Footer navigation: the safety net
The footer is where shoppers go when the menu and search did not help, and where careful buyers check who you are. Group footer links under short headings such as Shop, Help and About; include delivery, returns, order tracking, size guides, contact details and your company information; and repeat links to main categories. Keep it plain: people scanning a footer are looking for one specific link.
Ecommerce navigation for search engines and AI agents
Search engine crawlers and AI shopping agents use your ecommerce navigation to find and understand your products, and they read links rather than menus. Google advises linking menus to categories, categories to subcategories and subcategories to every product, using plain HTML links, and linking your best products more often. A product reachable only through search may never be found.
Google's guidance on ecommerce site structure makes five points that apply directly to navigation (source: Google Search Central):
- Make every page reachable by following links through your navigation: menus to categories, categories to subcategories, subcategories to products.
- Use
<a href>links, not JavaScript events on other elements, for navigation. - Googlebot generally does not type into a search box, so products only reachable through search may not be found by crawling. Link every product you want indexed, or list it in a sitemap or Merchant Center feed.
- Google judges the relative importance of pages from internal links: the more links a page has within a site, the more important it looks. Link your bestsellers from the homepage and other content.
- Structured data can help Google understand the purpose of each page.
AI agents that browse a store for a shopper face the same problem as a crawler: a menu built only from scripts, or products hidden behind a search box, can be invisible to them. Navigation built from real links serves people, search engines and agents at once. Agent readiness is one of the eight checks in Convertica's free CRO audit.
How to audit and test your ecommerce navigation
Audit ecommerce navigation by looking for the moments shoppers get lost: searches after browsing, searches with no results, category pages people leave without clicking a product, menu items nobody uses, and recordings of people opening and closing the menu. Fix clear breakages straight away, and A/B test bigger changes such as a new menu structure.
- List your top 20 searches and check that each one can also be reached through the menu in a few clicks.
- Check every no-results search from the last month and fix the cause.
- Find category pages with high exit rates and look at their labels, filters and first screen.
- Review menu click data and move or merge items nobody uses.
- Watch recordings of visitors who used the menu and then left.
- Run a tree test before you launch a new category structure.
- A/B test menu changes where your traffic allows, measured on orders and revenue per visitor, not menu clicks.
Plan the test length with the A/B test sample size calculator, and read the result with the statistical significance calculator.
Ecommerce navigation checklist
Run through this ecommerce navigation checklist on desktop and on a phone. Every "no" is a finding to fix or test.
- Categories are grouped and named the way shoppers search for them
- No product is more than three or four clicks from the homepage
- Labels are short, plain and do not overlap
- Large categories use a mega menu organized under headings
- Menus open by click and tap, not only by hover
- Search is a visible field with suggestions as you type
- Search handles synonyms, misspellings and product codes
- The no-results page suggests useful next steps
- Category pages show subcategories, filters and products
- Filters match each category and show product counts
- Breadcrumbs appear on category and product pages
- Main categories are visible on the mobile homepage
- Every category and product is reachable through plain HTML links
- Bestsellers are linked from the homepage
Questions about ecommerce navigation
What is ecommerce navigation?
Ecommerce navigation is the set of tools a shopper uses to move around an online store and find products: the main menu, site search, category and subcategory pages, filters and sorting, breadcrumbs, links between related products, and the footer. Good navigation gets people to the right product in as few steps as possible.
What are the ecommerce navigation best practices?
Group products into categories that match how shoppers think, keep labels short and plain, keep the hierarchy shallow, use a mega menu when you have many subcategories, show a visible search field, add filters on category pages, use breadcrumbs, show categories on the page on mobile, and use real HTML links so search engines and AI agents can follow them.
How many items should an ecommerce navigation menu have?
There is no fixed right number. Seven top-level items is a common rule of thumb, but large stores often need more. Use as few top-level categories as cover your range clearly, put the rest in a mega menu or on category pages, and test the menu with real shoppers and analytics rather than counting links.
What is the difference between a mega menu and a dropdown menu?
A dropdown menu shows a short single list of links under a top-level item. A mega menu opens a wide panel that shows many subcategories at once, grouped under headings, sometimes with images. Mega menus suit stores with a deep range because shoppers can see the whole category at a glance instead of opening nested lists.
Should an ecommerce store use a hamburger menu on mobile?
Yes, a hamburger menu is the standard on mobile because there is no room for a full menu bar, and shoppers recognize it. Label it Menu as well as using the icon, and do not rely on it alone: show your main categories on the homepage itself and keep the search field visible at the top.
How does ecommerce navigation affect SEO?
Ecommerce navigation shapes how search engines find and rank your pages. Google says it follows links from menus to categories, subcategories and products, and uses the number of internal links to a page to judge its importance. Use real HTML links, link every product you want indexed from a category page, and link your bestsellers more often.
How do I know if my ecommerce navigation needs improving?
Look for visitors who use search after browsing the menu, searches for products you sell that return no results, high exits from category pages, menu items nobody clicks, and session recordings where people open and close the menu repeatedly. Each of these signals that shoppers cannot find what they want through your navigation.
