Breadcrumb examples for inspiration

Most users are familiar with breadcrumb website navigation, even if they can’t determine what it is. The fact is, many of the biggest online retailer platforms out today make use of breadcrumbs – it’s particularly handy if you’ve got a big website with plenty of content.

But what does a good breadcrumb design look like? Is there a recipe for success when it comes to prototyping them, regardless of the type of website?

Take a look at how some of the websites in this list turned their breadcrumbs into real value for users, and get ready to feel inspired. But before we jump into the breadcrumb examples, let’s go over the basics tenets for how to design them in your prototyping tool.

Most of us will recognize the small series of links that can be often found in small size, on the top left corner of big platforms such as Amazon. They are usually small due to their secondary nature, and are provided to users in a horizontal line.

Breadcrumbs can very well trace the last few steps of the user, much like the children in the tale – but they can also serve other ends. Here are the 3 types of breadcrumbs we tend to see online:

• Location-based: the breadcrumbs represent levels of pages within the website, reflecting the general structure of the entire thing. Often seen in websites with lots of dense content, such as intranets or support centers.
• Attribute-based: commonly used for ecommerce, the links represent categories that go from big to small. This helps users jump to bigger categories and explore more items.
• Path-based: retraces user’s last steps. This means links will change from time to time as they will reflect their actions instead of the general information architecture of the website.

The name of the game is usability – literally, making your website as easy to use as possible. Usability has many faces, all of which contribute to a generally better product for users. Everything from making sure the copy is right on the buttons to adding animations to make things smoother counts as usability. So where do breadcrumbs fit in?

Familiarity and context. These are two aspects that have a direct impact on how users can make use of the website upon first meeting it – which is absolutely key. Those crucial initial moments are when users explore and decide on sticking with this website or moving on to something better or easier. It’s the first impression, the introduction.

The first moments of use imply users being confronted with something they’ve never used before. The learning curve plays a crucial role in the decision of staying or leaving – and breadcrumbs can help us make the whole experience easier.

Most users will recognize breadcrumbs – making it one element in the website they don’t need to master in order to use the product. But aside from that helpful fact, breadcrumbs also offer some context about where the user is within the larger website.

This extra context is particularly helpful to users who landed on the website at a lower level page, such as product page that was a result of a Google search. This is because the user always benefits from knowing not just where they are, but also having an idea of where they could go.

In short: no. Again, with breadcrumbs not being a one-size-fits-all kinds of component, they aren’t automatically suited for all websites out there. Mainly, websites that don’t have too much hierarchy in their pages or lack large volumes of content.

That is because breadcrumbs tend to work better within a complex structure that has a clear hierarchy. Not only would they add little value to a website that enjoys a total of 4 pages, but they would likely confuse users. In general, it’s best to tie breadcrumbs with big numbers of pages and content.

Now that we’ve gone over the basics, let’s take a look at some places that make the most of their secondary scheme. Check out these awesome breadcrumb examples!

The National Aeronautics and Space Administration has all sorts of content on their website. From live streams of press conferences regarding brand new images of Jupiter’s red spot, to hundreds of articles on the Moon, the Earth, Science and their missions.

It makes perfect sense that NASA would add some form of secondary links to help users move around and find what they are looking for. Their breadcrumb example is good because it uses the larger category (Solar System and Beyond) to define the topic and establish the kind of content users can find on it.

In this sense, NASA was clever to blur the lines between a secondary bar and breadcrumbs. This helps users get context on what they are seeing, and what other things they could find following the same category.

It also establishes a hierarchy of content, with a vertical list of subcategories on the left. Other topics that fit within the Solar System are listed on the top section (such as the Sun) while related topics (such as the Cassini mission) are listed below. Great information architecture, and a great breadcrumb example!

When we think of websites that hold a lot of content, big retail platforms come to mind. Walmart exemplifies that idea, as their website holds thousands and thousands of individual products. Each one of those products comes with its own product page as well as the corresponding categories and subcategories.

That makes Walmart a prime breadcrumb example. They have so many products that users benefit from a secondary scheme. Their attribute-based breadcrumb scheme is discreet and barely takes any room on search or product pages.

It’s also located right below the hamburger menu icon, making it something users will see when they decide to explore more items or compare options. This means users can decide to check out more TVs directly, instead of using the primary bar.

Much like Walmart, ASOS also has incredibly large volumes of content that is organized into categories – making it a great breadcrumb example. Sticking to the classic move by ecommerce brands, ASOS choose to also place their breadcrumb on the top left of the screen.

We appreciate that even though they’ve included the current page the user is in to the extreme right of the breadcrumbs – that last link is a different color. This will tell users that the last “link” is their current location and not a clickable link at all.

It’s always advisable to not have a link that adds no value or would be pointless, such as this link would be. It’s nice that they included it anyway, as it works as a snapshot. It immediately tells users where they are within the grand scheme of the platform – much like a “you are here” red dot in a shopping mall map. A great breadcrumb example!

We like that this breadcrumb example doesn’t have anything to do with retail and everything to do with education. EdX made its breadcrumb scheme slightly more visible than others by contrasting the font of the links with the background, following the same palette as the expandable menu above.

One interesting thing about this breadcrumb example is that while they are location-based, the last link to the right is clickable – and it doesn’t lead to the same page users are in.

In our example, we can appreciate that the name of the course we are looking at regards American Political Institutions, such as Congress. It is offered by Harvard, within a larger program of which the course on institutions is a part of. In the breadcrumbs, the last link leads to this bigger program and not the individual course.

This is an interesting choice, as it encourages users to sign up for individual courses while aiming for the program as a whole. It rings a similar note to ecommerce websites who try to get users to browse and compare items in the same category, making it a very interesting breadcrumb example.

This accounting and consultancy firm is a great breadcrumb example, because it shows that when it comes to complex content, users need all the context we can give them. Grant Thorton’s website is all about complex content, with topics like international taxation and asset management.

That’s why we really appreciate the breadcrumbs. It gives users a sense not just of where they are, but how the content fits within the website.

While a user may arrive at the website directly to the “opportunities, pitfalls of the new 199A deduction” page, they may not fully understand how that relates to the company. In this breadcrumb example, the link “tax services” would clarify that doubt.

We also appreciate that the website uses dark images that contrast to the white font of the breadcrumbs, making them discreet but easy to find. This makes for a great breadcrumb example when it comes to the visual aspect of this scheme.

This breadcrumb example is closer to our previous ecommerce examples. HP uses this scheme as a way to convey the overall information architecture of the website, by using attribute-based breadcrumbs.

We like that in the attributes, users can find not just where they are but also immediately go and find more items they may want to consider. HP was smart in how it organized the links, as someone looking at a HP Pavilion laptop will find “laptops”, “HP Pavilion” and “HP Pavilion Touch” coming in last.

This means that users can find themselves wondering if there is such a thing as an HP Pavilion Laptop that isn’t touch screen – which is a great shortcut. The same can be said for a different user looking at the same screen, and wondering if this laptop comes in larger sizes.

We like that they made it easy for people to find what they are looking for not just based on levels or categories, but the actual characteristics of the products. A great breadcrumb example indeed!

This breadcrumb example comes from one of the most famous educational institutions in the world. Harvard has a very interesting website, because of the sheer amount of bars.

As you can see below, we have 5 different bars! We know that the website has plenty of content for those pages – but boy, that information architecture must have kept the design team up at night. It was definitely worth it though, as the result is content that is clearly categorized and the ability users have to find anything they need quickly.

The breadcrumb example, however, does not work all on its own.

In fact, the breadcrumbs (top left of the screen) works alongside the vertical bar below. This helps users not just understand where they are, or the place of that content within the website. It also helps them see more content, so that users can grasp the general hierarchy at play.

Yes, this breadcrumb example is everyone’s favorite search engine, Google. And we don’t mean their support pages, either. When users search for something, they may very well be offered breadcrumbs of the listed results.

It is true that since users aren’t on the website when they see the search result, these breadcrumbs don’t do much to help them move around the website. However, it is true that by offering breadcrumbs, we give users an understanding of the general content of the website.

In the example above, we can appreciate that while Dribbble’s breadcrumbs include “tags”, the Search Engine Journal includes “SEO”. Upon first glance, we tell users that one platform has tags with what they are looking for, while the other platform has content on that topic within a category called “SEO”.

That’s quite a way to give users an idea of how that website is organized, and how it easy or difficult it would be to find the right content there.

That’s right – we are one of the breadcrumbs examples on this list. And we don’t even mean our main website pages, but rather our learning center. This is a platform that users can go to find all sorts of tutorials ranging from how to set up their profile to how to create a fluid grid.

The fact of the matter is that these tutorials represent a lot of content. That’s pages and pages of dense information that can be rather specific – and confusing to people who are just getting started.

That’s why our breadcrumb works with the vertical bar, like some other breadcrumb examples on this list. The breadcrumb offers context, and the bar takes users to any content they like – while conveying the hierarchy of the content as a whole.

Apple is a peculiar breadcrumb example. While most of the platforms on this list have their breadcrumbs near the primary links, Apple goes the opposite way. Their breadcrumbs are all the way at the bottom, right above the footer.

It’s an interesting choice when it comes to the location, as most users won’t get to the bottom of the page even if they are looking for a specific page within the website.

However, location aside, it’s still a solid breadcrumb design example. That is because it’s discreet in a way that fits in with the rest of the website and it’s an interesting contrast with the links in the footer. It’s not a visual contrast, but rather a functional one.

Their attribute-based breadcrumbs can work as a shortcut to users who want to take the full tour of the iPhone XR without having to go to the higher level “iPhones” page. We also like that they use the “>” symbol in order to make the hierarchy clearer.

Breadcrumbs can be a small detail that ends up having a big impact on the usability of your website. It’s true that they’re not the main focus of users nor do they make or break your design like primary links – but they do matter. It’s why all these breadcrumb examples exist in the first place.

Great UX is all about minding the small details to make sure users have an easy and enjoyable time on your website. You can get creative with your breadcrumbs or keep it neat and classic like many of the breadcrumb examples on this list. Either way, your users will appreciate their presence, making them a great addition to your product!