Breadcrumb navigation helps your users move around your site without getting lost.
Ever noticed those discrete link paths on the top of a website as you browse its contents? More importantly: have you ever used them to navigate? You’ve probably done both without realizing it, and there’s nothing wrong with that. After all, the point of good UX is to get out of the user’s way.
Breadcrumb navigation, however, does a little more than that: it’s a combination lifeline and roadmap for users on your site. When done correctly, it accomplishes several desirable UX functions for users:
- They don’t get lost because they can see where they are in relation to other pages on the site.
- They can return to previous pages on the site with fewer clicks.
- They have fewer hesitations about moving forward, because their way back is clear.
- They provide insight into the overall structure and organization of the site.
So, with that in mind, how does breadcrumb navigation actually work? Well, it comes in a few different forms, but executing it correctly on your site isn’t all that tricky so long as you follow established conventions. Here’s the breakdown.
Path breadcrumbs: leaving a history trail.
Probably the first kind of breadcrumbs to be used, these follow the path you take through a site so that you can see the pages you clicked through to end up where you are now. However, they have some problems (which we’ll get into in more detail a little later).
The biggest concern with path breadcrumbs is that, because they just show you where you’ve gone, they don’t provide any additional information for you as you explore the site. While they may help if you have a particularly winding site structure, the reality is that in such a situation, you’re probably better off rethinking your hierarchy than using path breadcrumbs.
Location breadcrumbs: indicating hierarchy.
Speaking of hierarchy, this is what location breadcrumbs do. One of the benefits of this structure is that, no matter where your users enter a website, they can see exactly where their entrance page exists in relation to the rest of the site.
This example from the online furniture vendor Joybird is a good example of location breadcrumbs. Just under the icon and main navigation, you can see the breadcrumbs showing the ordering of content on the site. If, after perusing desks for a bit, I want to jump back to “Furniture,” I can bypass “Home Office Furniture” completely.
Attribute breadcrumbs: filtering products.
Attribute breadcrumbs are particularly popular on ecommerce websites as a way of narrowing or refining a product, especially if combined with a large inventory.
This example from Amazon actually mixes location and attribute breadcrumbs. Everything from “Home & Kitchen” through “Home Office Desks” are location breadcrumbs, but “Cherry or Espresso” and “L-Shape” are specified attributes.
Navigation breadcrumb best practices.
I’ve used the caveat “when done well” a few times in this post, but what does that actually mean? Some best practices for breadcrumb navigation include:
- Use arrows ( > or » are popular choices) to indicate direction. Yes, neither of the above examples use these, and that’s their problem. Colons, semicolons, and backslashes are common choices, but they don’t visually signal hierarchy the way arrows do.
- Keep your breadcrumb navigation discrete, and tuck it under the main navigation of your site. Apple’s website has their breadcrumb navigation buried in the footer of their site, precisely where users won’t see it. I do not see the point in this. Seriously, Apple, I love you, but please fix this.
- Don’t make the current page linkable, but do link previous breadcrumb pages. Otherwise, what’s the point?
- Avoid repetition, and simplify titles as the user explores. The last item in the breadcrumb navigation should retain its full title, but if previous items are several words long, try shortening them.
- Do use it on mobile, but offer a simplified version, maybe on that only shoes the last one or two pages back. Otherwise, it may come to take up the entire screen.
Is breadcrumb navigation ever a usability error?
By now you may be convinced that breadcrumb navigation is the best usability feature ever, and that you should use it everywhere. However, there are a few contexts in which breadcrumbs can be less than helpful, and recognizing when and how to use them properly is essential.
1. You have a small site with only one or two tiers of navigation.
Breadcrumbs prevent users from getting lost. If your site isn’t large enough for users to become lost in, then you’re fine—no breadcrumbs required.
How large does your site have to be to require breadcrumb navigation? Once you get past a second tier of navigation, breadcrumbs become increasingly useful. In other words, no one needs breadcrumbs for “home > page 1.” But once you hit “home > page 1 > page 2,” then they start having a purpose.
2. You have a lot of unrelated content.
Blogs are a good example of this. While many blogs have categories and structures of content that might benefit from breadcrumb navigation, more frequently they’re broad, sprawling constructs with a lot of content that could only be categorized if you had to force it into boxes where it didn’t really belong.
Instead of breadcrumbs, you’d be better served by creating a category system with tags used to index blogs by topic. You might think this would create a breadcrumb system (home > category > tag > blog title), until you remember that each blog often has two or three categories associated with it, and possibly a half dozen tags.
3. You’re trying to replace your main navigation.
This is a very bad idea. For one, without a navigation menu, your users can’t easily move from one part of the site to another. They can only trace the path they took back to home before following a different route. If they want to jump directly from the page they’re on now to a deeper-level page, they can’t.
For another, what if someone entered your page on a deeper level of your site, such as a blog post or a landing page? Their breadcrumb path doesn’t show them anything but the homepage and the page they’re on. It’s as useless as it is confusing.
Good UX begins with organization.
One of the primary goals of UX is to helps users feel comfortable and assured as they explore your website. Organization is key to delivering this experience. When done correctly, breadcrumb navigation works with UX to create structure and order to the way a user explores content. It makes your website more searchable, and crucial information more findable.
In short, don’t let your users get lost in the woods. Use breadcrumbs to help them find their way back.