Breadcrumbs in WordPress Design: A Recipe for Improved Navigation

Breadcrumbs in WordPress Design: A Recipe for Improved Navigation

Have you ever hopped online with the goal of looking for something specific—like a new bathing suit or blender—only to find yourself an hour later wondering how the heck you ended up watching watermelon carving videos? Yeah, I’ve never done that either.

Regardless of how often this happens to you, you know that jarring feeling you get when you finally shake yourself out of the downward spiral and realize you don’t even remember what brought you there in the first place.

Now think about the experience of a visitor on your site. They came to your site, intending to find something specific. Then they get caught up looking at a whole bunch of other things and find that they’ve strayed too far from the beaten path. They want to back out, but have no idea where they even are on your site. They could glance back up at the navigation, but the menu doesn’t include all the category breakdowns that led them to the page.

This is where breadcrumbs come in handy.

What Are Breadcrumbs?

In the simplest of terms, breadcrumbs are a form of navigation for a website. Typically, they play a secondary role to the main navigation and allow visitors to see deeper levels of navigation that are directly related to what they’re looking for.

There’s more to it than that though:

Breadcrumbs as a Secondary Navigation

Breadcrumbs prevent you from having to stuff every single page on your site within the main navigation. That would be just plain messy and not at all user-friendly. Instead, the “menu,” which is just a horizontal list of hyperlinks, gets placed above your content.

Here are some examples of this secondary navigation style of breadcrumbs:

Google Drive always includes the users’ pathway at the top, so it’s easy to navigate back to an earlier folder without having to click the “Back” button multiple times or return to My Drive to start all over again.

Google Drive’s breadcrumbs.

Other file storage services do this, too, making a strong case for why breadcrumbs are great for helping keep businesses and individuals better organized. Here’s how Dropbox does breadcrumbs:

Dropbox’s breadcrumbs.

Oh, and in case you hadn’t noticed, the WPMU DEV blog does a good job of using breadcrumbs to display blog categories (something you can’t find anywhere else, but is still awesome information to have):

The WPMU DEV Blog’s breadcrumbs.

Breadcrumbs to Demonstrate Hierarchy

Let’s say a visitor finds one of your products through Google search and is taken directly to that page. They kind of like the product, but it’s not exactly what they wanted. Rather than back out to Google, and rather than go to your homepage to start from-scratch, breadcrumbs enable visitors to quickly make their way to items or categories that are of interest to them.So while that particular dog toy may not have been what they wanted, the overarching “Dog Toy” category in the breadcrumbs may lead them to a better fit.

Most major online retailers will use hierarchical breadcrumbs to ease the users’ path back to broader categories. For instance:

The Verizon Wireless smartphone categorization is a good example of this:

Verizon Wireless’s breadcrumbs.

Xerox does it, too:

Xerox’s breadcrumbs.

eBay is another example of this:

eBay’s breadcrumbs.

And, of course, Best Buy… which design experts around the web all seem to love:

Best Buy’s breadcrumbs.

Breadcrumbs to Show Selected Filters

Many websites with extensive product inventories offer visitors filtering capabilities in order to better narrow their search. There are some who have gone so far as to give visitors more control over their filters by adding them to a customizable breadcrumbs bar.

Here is how Gap does it:

Gap’s breadcrumbs.

And Zappos:

Zappos’s breadcrumbs.

As you can see, this isn’t so much about helping visitors navigate to another page. This is about giving them a way to remove a category or filter so they can navigate back to a previous set of filtered options.

Breadcrumbs for Steps in a Process

This is one you’re probably least likely to use, but it’s a good option to hold onto if any of your on-site processes require multiple steps. Think of a multi-step checkout, a job application, or a customer survey—the progress bars at the top or bottom are a form of breadcrumbs. The breadcrumbs, in this case, show visitors how much of the process is complete.

Dollar Shave Club includes breadcrumbs in its signup process:

Dollar Shave Club’s breadcrumbs.

Though many websites have gone the way of the single page checkout, there are still those like AO.com that find the multi-step process worth keeping around and, in turn, use breadcrumbs to assure visitors there are only a few more steps required.

AO.com’s breadcrumbs.

This is also a tool you can use if you have quizzes or surveys on your website. While promising an incentive at the end of it the multi-step process is nice, you may find higher completion rates if you can visibly show users how much more work they need to do, like this Mazda customer survey does:

Mazda’s breadcrumbs.

8 Tips for Using Breadcrumbs Effectively

As you can see, there are a mix of use cases for breadcrumbs—all of which are meant to improve the user’s experience on your website. Breadcrumbs also have (perhaps) unintended benefits for you too:

  • They improve self-navigation as they keep visitors from having to backtrack to the main menu.
  • They provide visual cues that direct visitors to explore other related categories or items.
  • They streamline your and your users’ workflow (like with Google Drive).
  • They ease potential worries over getting involved in a process (like with survey or checkout breadcrumbs).
  • They help with SEO as by providing context to search engines on how pages, products, or services are related.
  • They support a minimal design by keeping the secondary navigation out of the way.

If your WordPress site could benefit from breadcrumbs, make sure you do it right. Here are eight tips to keep in mind if you want to use breadcrumbs effectively to support your users’ experience:

1. Use Only One Breadcrumb Type

Breadcrumbs are meant to improve navigation, not over-complicate it. Probably the biggest offender of mixed breadcrumb types is the e-retailer (not naming names, but… Amazon does this) that mixes hierarchical breadcrumbs with filters. As a general rule:

  • Content-centric sites and organizational apps should use secondary navigation breadcrumbs.
  • Sites with a massive inventory of both related and unrelated items would benefit from using hierarchy breadcrumbs that split items into natural groupings or categories.
  • Product-heavy sites with one specific type of product that can be broken down into a variety of styles, sizes, or modes (like a clothing retailer) should use filter breadcrumbs.
  • Multi-step processes should use progress bar breadcrumbs.

2. You Don’t Have to Use Breadcrumbs

Yes, breadcrumbs are helpful in improving your site’s navigation. However, if you have a small site or your mega menu can easily contain all pages within it, then you likely don’t need breadcrumbs. Don’t unnecessarily bog down your design if you don’t need to.

3. Never Use as a Primary Navigation
There are certain elements of a site that visitors have come to recognize and become comfortable with, like the placement of the logo with respect to the navigation. They also know what to look for in a primary navigation: simple, clear page titles that direct them to the most important content on the site. Never try to swap the secondary and primary navigation with one another. They each have a unique purpose and style.

4. Create Distinct Separators

Depending on which plugin you use to set up your breadcrumbs, you may not have a say in the matter. Regardless of your options, you’ll want to ensure that whatever you use includes a distinct symbol to keep each level, filter, or category separate. The “>” is probably the most common separator, though there are some sites that use “/.”

5. Be Reasonable About Size

Remember that this is a secondary navigation. Most people already know where to look for it, so there’s no reason to dominate or overwhelm your design with breadcrumbs.

6. Highlight the Current Location

In the breadcrumbs examples above, you’ll notice that each of them utilizes either some type of bolded or colorful text to indicate that “You Are Here”. Those current page breadcrumbs also should be styled as plain text. If the hyperlink remains within them, that could cause some confusion for visitors thinking there’s more to explore there.

7. Place Only on Pertinent Pages

Breadcrumbs aren’t like a primary navigation that needs to be present on your site at all times (or at least the hamburger icon link leading visitors to it). In fact, you really should only place breadcrumbs on pages where the secondary navigation is needed. So the home page, landing sales pages, contact, about us, and so on won’t need breadcrumbs.

8. Use the Breadcrumb NavXT Plugin

There’s no need to try and code breadcrumbs yourself. Breadcrumb NavXT is a high-quality plugin you can use to make your breadcrumbs look nice and work flawlessly.

Breadcrumb NavXT is a “locational” plugin, so that means it works similarly to the ones you’d find on Google or the WPMU DEV blog. In other words, if you want visitors to see the steps that led them directly to their current location, this is the plugin to do it.

It comes with a number of customization options (like changing the breadcrumb separator symbol), so you’ve got some wiggle room in terms of where your breadcrumbs will work and how they’ll look.

For other types of breadcrumbs, check with your eCommerce and SEO plugin to see if they include this feature. Many of them do—since breadcrumbs are so closely tied to both—so check on what you currently have before getting a new one.

Wrapping Up

As every lost little boy and girl in the woods would tell you, leaving a trail of breadcrumbs is a good way to ensure you can retrace your steps. Unless the birds eat the breadcrumbs, in which case, you may end up in a witch’s home… but I don’t know that you’ll have to worry much about that online!

Nevertheless, breadcrumbs are a good idea if your site contains a large inventory that you want visitors to readily explore. Your primary navigation realistically can’t support all those pages or items, so utilizing a secondary navigation to share that information with visitors is a smart move. It’ll ease their self-guided navigation around the site and perhaps open them up to other opportunities they didn’t know existed.

Brenda Barron
Over to you: Do you think that breadcrumbs arose in response to minimal design and the discarding of the sidebar as a “must have” design element? Or do you think they’re just a natural progression of adopting more UX design features into everyday web designs?