Ecommerce Navigation Design: Headers, Menus, and Category Paths

Start with five shopping tasks, not a menu

The best navigation plan is a short map between what a shopper wants and where the right products live. Begin by writing five important tasks in the shopper’s language, then assign each task a starting menu label, a category path, and a clear destination. Build the header around those routes. The goal is not to expose the whole catalog at once; it is to help people predict their next step.

For a small skincare brand, the tasks might be “find a daily face cleanser,” “shop for dry skin,” “buy a gift,” “see all moisturizers,” and “return to my cart.” Those statements are more useful than starting with a list of pages, because each one describes an outcome the navigation must support.

Navigation cannot decide the taxonomy for you. The merchant still knows which distinctions matter to customers, which products belong together, and which shopping paths deserve priority. If that groundwork is unfinished, use the guide to organizing products and categories before designing the menu.

Turn categories into a predictable structure

Category-based navigation works when categories divide the catalog in ways shoppers can anticipate. Start with one primary organizing idea: product type, use, recipient, activity, room, or another meaningful buying frame. Add a second frame only when it answers a genuinely different task.

For example, a skincare store may use product type as its main structure and concern as a secondary route. “Cleansers” and “Moisturizers” tell shoppers what the products are. “Dry skin” and “Sensitive skin” help shoppers begin with a need. Both can be useful, but the same product appearing through both routes does not require two competing catalog systems. It means the navigation offers two understandable entrances to relevant products.

Here is a compact planning tree:

Store
├── Shop by product
│   ├── Cleansers
│   ├── Moisturizers
│   └── Sets
├── Shop by concern
│   ├── Dry skin
│   ├── Sensitive skin
│   └── Dullness
├── Gifts
│   ├── Gifts under €40
│   └── Gift sets
└── Cart

This is a planning asset, not a feature specification. Keep the implemented structure within what your platform currently supports, rather than assuming a complex nested menu will behave exactly like the diagram.

Before accepting a branch, ask three questions:

1. Does the label describe products a shopper would expect to find together?
2. Is the group meaningfully different from its siblings?
3. Does it lead to enough relevant products to justify a permanent route?

If a group fails those tests, it may belong as homepage merchandising, seasonal promotion, or category-page content instead of global navigation. The category page design guide covers what happens after the click; this guide stays with the route that gets shoppers there.

Use concrete menu labels

A label is good when a first-time visitor can make a reasonable prediction before selecting it. “Cleansers,” “Desk lamps,” and “Gifts under €40” are concrete. “Discover,” “Essentials,” and “Our world” may fit a brand voice, but they make the shopper interpret the company before finding a product.

Prefer familiar nouns for primary shopping routes. Use a qualifier when it removes ambiguity: “Shop by room,” “New arrivals,” or “Gifts for runners.” Keep labels short enough to scan, but do not shorten them into vagueness. “For her” may be compact yet less informative than “Women’s accessories” if the actual category is product-led.

Do not create several labels for the same destination merely to fill the header. “Shop,” “Products,” and “Catalog” beside one another make the hierarchy look larger without offering different choices. Likewise, avoid mixing levels: a top row containing “Shop,” “Candles,” “About,” and one individual product makes it unclear whether the menu represents sections, categories, or promotions.

Write the labels in a simple sheet before designing the header. For every label, record the expected destination and one sentence describing what belongs there. If two descriptions overlap heavily, merge or rename them. If the team cannot agree on what a label contains, shoppers are unlikely to infer it.

Give the header a clear hierarchy

The header has three jobs: identify the store, open the main shopping paths, and keep essential utilities available. It does not need to summarize the homepage, explain the brand story, or display every campaign.

A desktop header can use two visual levels without becoming busy:

DESKTOP HEADER
┌──────────────────────────────────────────────────────────────┐
│ BRAND        Shop by product  Shop by concern  Gifts   Cart │
└──────────────────────────────────────────────────────────────┘
                  ↓
          category or product path

The brand mark provides orientation. Primary category entrances carry most of the visual weight. A small number of utilities remains recognizable and consistent. Promotional messages, if needed, should not compete with the main route on every page.

Header priority should reflect shopping priority, not internal company structure. A founder may care deeply about “Our story,” but it usually should not displace the main product route. Brand explanation can remain accessible without receiving equal weight to shopping.

Consistency matters across the store. When a shopper moves from the homepage to a category or product page, the same main routes and labels should remain recognizable. The ecommerce homepage design guide explains how the homepage can introduce key routes without turning the global header into a second homepage.

Keep paths shallow by reducing decisions

“Shallow navigation” is often treated as a demand that every product be reachable in a fixed number of clicks. That is the wrong target. Click count alone does not measure clarity: two confusing choices can be harder than four obvious ones.

Use shallow paths as a decision principle. Remove steps that add no useful choice. If “Shop → Products → Product types → Cleansers” contains two generic levels, collapse them. But keep a meaningful intermediate choice when it helps shoppers narrow a large or varied catalog. A route is appropriately shallow when every step answers a question the shopper understands.

Review each important path as a sentence:

I want a face cleanser, so I choose Shop by product, then Cleansers, then compare the products.

If the sentence contains a step you cannot explain, remove or rename it. If two adjacent steps ask essentially the same question, combine them. If a category produces an overwhelming page, improve the grouping rather than hiding the problem behind a longer path.

Design mobile navigation as its own sequence

Mobile navigation is not the desktop header squeezed into less space. It is a sequence opened on demand, with less visible context and more dependence on clear labels, obvious back movement, and comfortable scanning.

MOBILE HEADER                 OPEN MENU
┌──────────────────────┐      ┌──────────────────────┐
│ ☰   BRAND       Cart │  →   │ Menu              × │
└──────────────────────┘      │ Shop by product    › │
                              │ Shop by concern    › │
                              │ Gifts              › │
                              │ About                │
                              └──────────────────────┘

Keep the closed header focused on identity, menu access, and supported essential actions. Inside the menu, preserve the same terminology and broad order as desktop. When a route opens another level, show where the shopper is and provide a clear way back. Do not make them close the menu and restart because they chose the wrong branch.

Test long labels, the longest realistic category list, and the bottom of the open menu. Check whether scrolling hides orientation or essential controls. Then test the route on real devices rather than judging only a wide browser preview. The mobile ecommerce UX checklist extends that review through product cards, cart, and checkout.

Run a five-task navigation test

A navigation review becomes useful when it tests specific outcomes. Choose five tasks that reflect the store’s most important shopping routes. Give them to someone who did not design the structure, and ask the person to start from the homepage without hints.

Copy this sheet for desktop and mobile:

Watch the first choice closely. A successful destination reached after several false starts is not a clean pass. Record the words the tester expected, where they paused, and whether the mobile route created a different misunderstanding. Do not explain the menu during the task; the explanation would hide the problem you need to see.

After all five tasks, change the smallest thing likely to resolve the pattern. Rename an ambiguous label, move a priority route up one level, remove a duplicate entrance, or separate two categories that shoppers confused. Then repeat the tasks. The objective is not to make one tester fast; it is to make the structure predictable for the intended shopper.

Build and refine navigation with Setka

Setka generates the header and navigation as part of the whole storefront, informed by the merchant’s brief, catalog, categories, and store-wide direction. That keeps global navigation connected to the homepage, category pages, product pages, cart, and responsive layouts instead of treating the header as a separate theme component.

The merchant still decides the important shopper paths and validates them. After generation, you can direct a refinement in plain language using the current page as context, edit exact menu text directly when you know the wording, and check the result in preview before publishing. The storefront remains inside Setka, so these changes do not leave you with theme code to maintain.

Setka turns the prepared catalog, categories, and brand direction into an implemented navigation system. The merchant defines the taxonomy and priority journeys, then reviews the generated result against the five tasks. Bring any launch-specific navigation requirement into onboarding so it is addressed before the store is designed around it.

Your next step is concrete: map the five most important shopping paths for your store, name every decision along each route, and test whether the labels make the next choice obvious.