Mobile Nav


When most stores don’t focus on mobile, their conversion rates suffer on mobile. As a result, mobile conversion rates remain the biggest problem for most online stores. And a large part of that falls on store owners’ neglect of their mobile navigation.

Here are a few things that should exist as a baseline for mobile navigation:

  • Mobile navigation should exist as a button, flush top left, with the icon ☰, in a sticky header.
  • When tapped, the button should provide a list of product categories.
  • Search and login should be placed flush bottom, if it’s appropriate to include either of them.
  • No more than 7 items should be available at any layer of mobile navigation.
  • When any item has sub-items, such as a category possessing sub-categories, a single right-facing guillemet (›) should be placed flush right. Tapping that row should open the list of subcategories, with a left-facing guillemet (‹) flush left. Tapping the left-facing guillemet should take the customer back to the parent list of items.
  • Optionally, this icon should be separated with a different background color and left-hand border, so that tapping the name takes you to a page displaying all subcategories, and tapping the icon opens the list of subcategories in the mobile nav.
  • Mobile navigation should occur within 10 milliseconds of tapping.
  • Mobile navigation items should be at least 44pt on each dimension.
  • Mobile navigation does not need hover states.
  • Mobile search should autocomplete within 10 milliseconds of each character entry.

Correct mobile navigation should do each one of these things as a baseline. If you break a rule, you should have a good reason for it. That reason should be focused on converting the customer. “It’s hard” is not a good reason.

Most customers don’t see your fancy mega menus. Most customers don’t even see your desktop nav. By putting effort into your desktop navigation, you are usually appeasing stakeholders while ignoring the needs of most of your customers. Do so at your store’s peril.

← Back to the Blog Check Out Draft’s Store →