Ecommerce Navigation: How to Design Menus That Help Customers Shop

Good ecommerce navigation starts with a product taxonomy built around how shoppers think, not how the business is organized. Use clear, literal category labels and a reasonably shallow hierarchy, and turn attributes such as size or colour into filters rather than extra menu levels. On desktop, well-grouped mega menus with clickable headings work well. On mobile, use a drill-down menu with visible search, a back option and “Shop all” at each level. Add hierarchy-based breadcrumbs, cross-links between related categories and strong search, then test the structure with tree testing and real search data.

Menus are one route to products among several; for search, filters, recommendations and guided selling together, see ecommerce product discovery. For how navigation fits the store's URL and catalog structure, see ecommerce website architecture.

Three terms often get mixed up. The taxonomy is how products are classified: the category tree plus the attributes recorded for each product. Information architecture is the wider structure of the store, including content such as guides and help. Navigation is the interface that exposes that structure: menus, category pages, breadcrumbs and links.

Most navigation problems are structure problems in disguise. Redesigning a menu around a confusing taxonomy just presents the confusion more attractively. The diagram above shows the levels this guide covers: main navigation, mega-menu groups and listing pages refined by filters.

Start with an inventory of what you sell, then learn how shoppers group it. Card sorting shows the categories and names people expect; search logs show the words they use; competitors and marketplaces show the conventions shoppers have learned elsewhere.

A key decision is what becomes a category and what becomes a filter.

Labels should be the words shoppers would use, specific enough to predict what's inside, and distinct from each other. Avoid catch-alls such as “Other” or “Accessories” that could mean anything, internal range names, and clever marketing phrases. Put the distinguishing word first so menus scan quickly. Where a category uses specialist terms, add a short description on the category page. Label changes are among the cheapest navigation fixes, so test them early.

Every extra level adds a click and a decision; every extra option at one level adds scanning time. Aim for a hierarchy where each level is a meaningful choice. If a level contains only one or two subcategories, merge it. If one category contains dozens of subcategories, consider an intermediary category page that groups them, or move some distinctions into filters.

Baymard Institute's homepage and category navigation research covers taxonomy, main navigation and intermediary category pages in detail, and reports that most benchmarked sites perform at a mediocre level or worse in this area, so it's an area where careful design stands out.

The main bar usually holds top-level departments plus a few cross-cutting entries such as New, Sale or Brands. Keep it to what fits comfortably without wrapping, and separate utility or “courtesy” navigation (help, order tracking, account, store finder) into a smaller secondary area. The cart and search should be visible on every page.

For stores with several levels, Nielsen Norman Group found that mega menus work well: large panels that show many options at once, grouped into sections. Guidelines that make them work:

On mobile, the menu is usually a panel that drills down one level at a time. Show where the shopper is, provide an obvious back option, and include a “Shop all [category]” link at each level so they can see everything without choosing a subcategory. Keep search visible in the header rather than inside the menu, because many mobile shoppers search first. Native apps often add a bottom tab bar for main sections such as Home, Search, Categories, Wishlist and Account.

Baymard's mobile ecommerce research identifies disorientation as one of the overarching mobile problems: shoppers lose track of where they are. Clear headings, breadcrumbs or parent links and predictable back behaviour address it. See mobile ecommerce UX.

Navigation and search are complementary. Shoppers who know what they want search; those exploring browse. Search results should reuse the same filters and category structure, and search logs are one of the best sources of evidence for navigation labels. See ecommerce search UX.

Use hierarchy-based breadcrumbs (Home › Men › Jackets › Rain jackets) on category and product pages, not history-based trails. They tell shoppers who arrived from search or an ad where they are and let them move up to a broader category in one click. On mobile, a single link to the parent category often replaces the full trail.

Shoppers don't always follow the tree. Link between related categories (rain jackets to waterproof trousers), offer alternative ways in such as shop by room, occasion or use case, and show relevant categories on product pages. A product can appear in several curated places, but give it one primary category path so breadcrumbs and URLs stay consistent.

For broad departments, an intermediary page between the menu and the product list helps shoppers choose a subcategory: visual tiles for subcategories, short guidance for technical choices and a link to see all products. For narrow categories, send shoppers straight to the product list. Don't make every department an extra page to click through.

Menus must work with a keyboard and screen reader: triggers that open with Enter or Space, expanded and collapsed states exposed, logical focus order, Escape to close and visible focus. Provide a skip link past repeated navigation, keep labels consistent across pages, and make sure mobile menu controls have accessible names. See accessibility in UI/UX design.

Ecommerce navigation works when the taxonomy matches how shoppers think and the interface exposes it clearly: literal labels, a sensible hierarchy, well-built mega menus and mobile menus, breadcrumbs and cross-links, backed by search and filters. Test the structure before you design the menus. Next, see how shoppers narrow results with filters and faceted navigation.

For related guides, see search vs navigation.