Are we speaking your language? That’s no accident. We choose our industries with intent—because no competitive advantage rivals experience.
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:
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.
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.
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 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.
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:
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.
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.
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.
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.
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.