Responsive email navigation

When I first started designing responsive emails, navigation was the component that intimidated me the most. Avoiding complexity was my earliest strategy, so I’d hide the navi on mobile or shift a three tab navi. Three years on we’ve run through numerous responsive navigation patterns, though there’s a handful I tend to revisit.

Wanting to see if the patterns I use are popular industry-wide, I looked at the navigation of 50 responsive retail emails. Here is a breakdown of the patterns I discovered.


Reduce (15 of 50)

Reduce the number of tabs when switching from desktop to mobile. Good: Extra desktop tabs, takes up only one line on mobile. Bad: Too many desktop tabs can be at the expense of tablet friendly spacing, have to decide which tabs to keep.

Retailers who reduce: Allen Edmonds, Bluefly, Columbia, Giggle, John Lewis, Nike, Nordstrom, Prep Sportswear, REI, Size?, Target, UGG, Uncommon Goods and Walmart.

Responsive email navigation


Hide (13 out of 50)

Hide the desktop navi from mobile users. Good: Right to the main content on mobile, avoids having to implement a mobile navi solution. Bad: No mobile navigation, if it isn’t important why have it in the desktop build?

Retailers who hide: American Apparel, Apple, asos, Boots, GoPro, Kmart, O’Neill, Paul Smith, Refinery29, Shoebuy, The Home Depot, ThinkGeek, Toms

Responsive email navigation


Top to Bottom (8 out of 50)

Reposition the navigation from the top on desktop, to a vertical list at the bottom on mobile. Good: Content first, often mimics the mobile site, positioned at bottom so you can give each tab plenty of height. Bad: Mobile navigation may be too buried for some users.

Retailers who use top to bottom: Gap, Horchow, Joy, Mr. Porter, Net-a-porter, Neiman Marcus, Saks, Timberland

Responsive email navigation

Saks keep things more compact than other retailers using this pattern, by reducing from 5 tabs to four on mobile and hiding their secondary banner.

Responsive email navigation


Shift (8 out of 50)

Start with 3-5 tabs on desktop, then just shift them into place on mobile. Good: Nice and easy. Bad: Limits you to 3-5 tabs on desktop (though I usually don’t exceed 4).

Retailers who shift: Amazon, Michaels, Moda Operandi, ModCloth, Mulberry, Nine West, River Island and Tsubo.

Responsive email navigation


Stack top (3 out of 50)

Split the desktop tabs into a two column stack on mobile. Good: Keeps navigation exposed and accessible, touch friendly format. Bad: Can take up too much first screen space, especially if stacked in a single column. I try not to exceed 6 tabs, 2 col. with this pattern.

Retailers who stack: House of Fraser, Wilsons Leather, Levenger.

Responsive email navigation


Split (2 out of 50)

Part of your navigation stays up top, while the other part is positioned below the main content. Good: Retains one row of key tabs up top, accommodates a larger no. of tabs. Bad: Might be easier for users to view the navi all in one place, bit trickier to implement.

Retailers who split: Bag Borrow or Steal and Crocs.

Responsive email navigation


Wrap (2 out of 50)

Wrap the navigation on mobile. Good: Easy to implement. Bad: Can take up valuable space, look a bit scruffy. The temptation not to add enough line-height and padding.

Retailers who wrap: Havaianas and Dicks Sporting Goods

Responsive email navigation


My notes

Adaptive layout vs. responsive - If you want to be picky 77% were adaptive layouts, not responsive. Retailers must feel mid-sized devices are too small fry to support right now.

HTML vs. images - 34% use an image-based navigation and 66% use HTML.

Tablet friendly - Some desktop navigation is not tablet friendly. Choice is between 10 desktop friendly tabs, or 5 tablet ones (need extra spacing e.g Saks vs. Walmart). Or add some tablet media queries…

Number of desktop tabs - 13 highest no. of desktop tabs (Boots, Net-a-Porter and Neiman Marcus). Lowest is 3 (GoPro and Michaels). 5, 6 then 8 are the most common no. of tabs.

Number of mobile tabs -  Highest no. of mobile tabs is 13 (Neiman Marcus), lowest is none with the hide pattern. 0, 3 then 4 are the most common no. of tabs.

More tabs on mobile - Some retailers added an extra category or two on mobile (Gap went from 8 to 10). Or contextual tabs like search, phone or SMS.

Only mobile - Others displayed mobile-only navigation, like this email from Mr. Porter. They have more than one navi pattern (a few do), test withholding the desktop navi for certain campaigns.

No navi - Some responsive retail emails like Luggage Online and Threadless have no navigation. They were not included in this research, though ‘no navi’ is obviously an option.

Mimic mobile site - Should you mimic it like Saks or T.J. Max? Sometimes, but be careful of copying functionality you don’t have (+ in Timberland didn’t drill down, was also not linked).

Performance - Image based tabs add weight - and are often blurry blobs - so does hiding content. Though navi tends to be pretty lightweight.

No toggle or fly outs - Hamburger is all over the web, but not seen in my sample group. Here’s what it looks like. As web navi patterns have advanced with JS assistance, we can’t always follow.

Sub navi - See REI and Moda Operandi. Luckily no mega-menus for us.


What’s it all about

Popular could just mean its easy to implement, everyone is copying everyone else or retailers prefer to play it safe. There’s still more testing to be done around how all these different navi patterns affect performance. We’ll see new responsive email navigation patterns emerge along with these old faithfuls. If I’ve missed any good one’s let me know…



6 Responses to “Responsive email navigation”

  • Tim
    March 3rd, 2014 22:29


    Why don’t you consider the classic menu way for smaller devices that is used on websites?
    A menu icon and then have the menu shown when clicking the icon.

  • Anna Yeaman
    March 4th, 2014 10:42

    Hi Tim,

    you’re right ‘toggle’ definitely seems to be the most popular way to handle mobile navigation on the web. Though none of the 50 retailers used it, so I didn’t feature it (bit about it in the notes above).

    We had a bash at one ourselves a while back - - and its really hard to get solid everywhere to the point where you’d deploy it with a client. Easy just on iOS, but when you dig into the many older versions of Android all sorts of small flaky stuff pops up. One downside of having a mobile device lab, you dig deeply enough and everything breaks somewhere. We finally managed to get a solid version up and running (seen in our responsive design video), but still prefer using other navi patterns like the one’s above for the most part as they seem more intuitive.

  • Mike
    August 6th, 2014 01:22

    Great article, very helpful and thanks for submitting them to Litmus! Experimented using the ‘wrap’ technique but found some rendering issues in a handful of clients, particularly due to us having an uneven number of navigation options. Think we will go for the ‘reduce’ method.

  • Anna Yeaman
    August 7th, 2014 09:41

    Hi Mike, let us know how you get on with reduce. I didn’t see many examples of wrap when putting this together, though I just saw H&M have one though with only 4 tabs I think with wrap like you said it just depends on how many tabs and how long the category names are, some work others look messy.

    Its always worth testing a couple of these navi approaches. I’m seeing more retailers opt for top to bottom recently, though not sure if its because its best for them or all copying each other.

  • Kevin
    May 28th, 2015 01:06

    These are some really brilliant examples of menus in email. E-commerce retailers, media and information websites, technology companies and many more can utilize menus in email to stack up information and in turn providing users option to navigate within email will also boost the conversion rate. I recently checked out how many companies are taking a step further to incorporate menus in email and I found this blog which might add value to your readers -

  • Anna Yeaman
    June 5th, 2015 16:43

    Cheers Kevin, I’ll send myself your demos…


Leave a comment: