Your Email Navbar the GPS to Customer’s Online Destination


Your email navbar does not have to be an exact replica of your site navbar. Think of the navbar as the GPS for your customers and prospects. It will guide them to their online destination. And, when carefully mapped out, the navbar will guide them to exactly where you want them to go.

In my earlier articles on email navbars, I discussed how deep navbars dive into content (categories vs. products, for example).

Things you should know about Navigation bar:



As far as looking at placement, a scaled-down version may actually be preferable, given the limited space in an email. In the Williams-Sonoma example below, the navbar tucks neatly below the logo.

Example of scaled-down navigation bar by Williams-Sonoma

With all the products Williams-Sonoma offers, you might be wondering why cutlery is the only category featured. Until you see the rest of the email, promoting a cutlery sale.


Example of promoting a cutlery sale by Williams-Sonoma

The subject line emphasizes the promotion even more: Take Your Cut – Up to 65% Off Wüsthof Gourmet Cutlery – In Stores & Online.

Apple takes the minimalist concept even further, by eliminating the navbar altogether.


Example of eliminating navigation bar by Apple

This can be effective when you want the focus of your email to be solely on the main content. Here, the focus is on the product; there is no navbar to distract your attention.


Mobile navigation

Removal of the navbar can also work well for mobile. If you’re not ready to go sans navbar, you should think about using a scaled-down version. Mulberry has condensed its mobile navbar to only three links:

Example of scaled-down mobile navigation bar by Mulberry


While I find the “Explore” link rather ambiguous, it should be encouraging click-throughs or it shouldn’t be part of the navbar. Test wording of links to determine what draws your subscribers into your site. Instead of “explore” is it “browse”, or “discover”, or “favorites”, or “search”? Keep in mind though, that if you want to save space, shorter words are preferable to convey your message. Using less navigational elements can be a great shortcut to mobile savvy design as you won’t have to resort to responsive elements to make it work.

Expedia includes only four links in this mobile version of its email:


Example of short mobile navigation bar by Expedia

It is interesting that packages, not flights, is the first link on the navbar. (Flights is the first link in the search function on its site.) Perhaps Expedia was pushing its packages in this particular email. That is just one solid email testing example; change up the order of your navbar links to see what results in the best conversion for your audiences.


Segmentation and your navigation bar

Like Expedia, this Domino’s email also uses just four links in its navbar:


Example of special segmentation in mobile navigation bar by Domino

Notice that the last link targets Domino’s Spanish-speaking customers. Obviously Domino’s market research revealed that this segment is important enough to merit a link on the navbar. In fact, Domino’s has an entire Spanish website. We can learn from Domino’s: You can conduct market research to improve your email marketing strategy. determine your key audiences and then market to them accordingly – also via email.

Your navbar can also target specific audience segments, such as gender. The Ahnu email below, featuring a breast cancer message, is geared more toward women. The navbar appeals to women’s philanthropic nature with a “greater good” link:


Example of special segmentation in navigation bar by Ahnu

While we as email marketers are obsessed with ROI, remember that cause-related marketing also can be very effective in terms of brand building through email.

In this H&M email, the ladies category (the first link on the site navbar) is conspicuously missing from the navbar. That’s because the email promotes a Super Bowl-related event.


Example of special segmentation in navigation bar by H&M


Themed emails

Every aspect of this Brookstone Father’s Day email is about men, although the target audience is ultimately the women (also children) buying the gifts.

Example of themed email for Father’s Day by Brookstone

The preheader, navbar, headline, and subheads, all the elements of the email include references to reinforce the message. The navigation includes the father’s day gifts link. Often the header and navigation is part of an email template. Planning the layout of your mails grid-wise, it feels natural. Most of your emails will have a navigation bar and often it might be the same. Standard elements, content blocks, and design in a template can speed up the creation up of your emails.

But as I mentioned before, it is good practice to look at your navigation as dynamic and possibly put your current offer in there. Taking themes, like father’s day, into account. So be sure that there is some flexibility in your template and you are able to (quickly) change the navigation elements that are in there.

Let’s take a look at several other special day and holiday themed emails to see how this is reflected in the navbar. At the other end of the gender spectrum is this Victoria’s Secret Valentine’s Day email, Shexy Email! But without a navbar – and minimal clothing for maximum impact. Although there is no navigation here, which can be a choice as per the Apple example before. I would encourage to add a navigation if you chose that way, but add it in the footer. Minimal distraction, added benefits of navigation.

Example of themed email for Valentine’s Day by Victoria’s Secret


If there are special days, like Easter it might be good to use the space around the navigation bar to emphasize not the products, but the date and cause for celebration like 1800 flowers does in the email below. Especially when these are lesser known special days like “secretary day”.


Example of put the date of Easter in navigation bar by 1800 flowers

In this J.Jill holiday email, a red bow adds a festive finishing touch to the header, and a red “gift shop” link leads off the navbar.

Example of themed email for holiday by J Jill

Anthropologie literally ties its nav together, with a gift icon on the left, a ribbon connecting each link, and a curlicue of ribbon at the end. This clearly are image elements, be aware though that the people who have their images turned off, will not be able to see them.

Example of themed email by Anthropologie

Williams-Sonoma uses this email navbar to promote Black Friday. As you know these holidays are big sales events where sizable portion of the yearly revenue is made. With day being named Black Friday and Cyber Monday are now turning in to Black Week and Cyber Week and even Green Monday and Last Sleigh day making their introduction into the end of year holiday craze for retailers.

Don’t be afraid to ramp up bigger events and make a fuss out of it, before they even started.


Example of themed email for Black Friday by Williams-Sonoma

In a departure from typical sell-sell-sell holiday emails, Bed Bath & Beyond links to its holiday blogs from this email. It has the themed design in there as well.


Example of link to holiday blogs in Email by Bed Bath & Beyond

The end of year is the time for gift giving. The following emails, from Gumps, Saks Fifth Avenue and Waterford, all include a link to gifts highlighted in their navbars. And is that snow in Saks’ email?


Example of highlighted special link in email navigation bar by Gumps


Example of highlighted special link in email navigation bar by Saks Fifth Avenue

Blue Nile even includes a link with an icon to encourage click-through from their navigation bar.


Example of highlighted special link in email navigation bar by Blue Nile



Have fun with your email navbar. Sure, it’s a crucial element for bringing subscribers to your site. But it can also be a visual element that can set the tone for the rest of the email. Variation is spice!

Think of the navbar as the GPS for your customers and prospects. It will guide them to their online destination. Just as with any email starting with the end in mind, where would they best be directed to? When carefully mapped out, the navbar will guide them to exactly where you want them to go. Is it time to revisit your own email navigation? Share with us in the comments below!


HTML Email Design Specifications

Are you looking for ways to use your navbar knowledge? In this document, we’ve collected some best practices for HTML email design — practices that will help you maintain full control over how your messages look inside inboxes.

Become a marketing PRO!

Join more than 15,000 SMB marketers who get our top marketing articles straight into their inbox