Breadcrumb examples for navigation inspiration

November 12, 2019
awesome breadcrumb examples for navigation design

Breadcrumbs are instantly recognizable - but what makes a good breadcrumb scheme? Check out these examples and see what unites them.

Most users are familiar with breadcrumb 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 navigation look like? Is there a recipe for success, regardless of the type of website?

Start prototyping websites with primary and secondary navigation with Justinmind
Download Free

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.

Breadcrumbs: what are they and why are they a good thing?

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.

Even though breadcrumbs get their name from the famous Hansel and Gretel tale, this origin can often mislead designers as to what breadcrumbs really are.

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 navigation instead of the general information architecture of the website.

The benefits breadcrumbs bring to the table

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.

benefits of familiarity and context with breadcrumbs

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.

Does every website benefit from having breadcrumb schemes?

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.

Breadcrumb examples that we love

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

1. NASA

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 navigation 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.

NASA example of breadcrumbs

In this sense, NASA was clever to blur the lines between a secondary navigation 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!

2. Walmart

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.

walmart breadcrumb example

That makes Walmart a prime breadcrumb example. They have so many products that users benefit from a secondary navigation 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 navigation bar.

3. ASOS

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 navigation on the top left of the screen.

asos example of breadcrumb navigation

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!

4. EdX

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.

edX breadcrumb example

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.

BTW: We’ve featured EdX in two of our education-oriented posts. Check out app development courses and web development courses for more information.

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.

5. Grant Thorton

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 breadcrumb navigation. It gives users a sense not just of where they are, but how the content fits within the website.

breadcrumb scheme grant thorton example

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 navigation scheme.

6. HP

This breadcrumb example is closer to our previous ecommerce examples. HP uses this navigation 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.

HP breadcrumb example

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!

7. Harvard

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 navigation bars.

As you can see below, we have 5 different navigation 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.

harvard navigation example - breadcrumbs

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

In fact, the breadcrumb navigation (top left of the screen) works alongside the vertical navigation 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.

8. Google

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.

google search result breadcrumb example

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.

9. Justinmind

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.

justinmind learning center example of breadcrumbs

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 navigation works with the vertical navigation bar, like some other breadcrumb examples on this list. The breadcrumb offers context, and the navigation bar takes users to any content they like – while conveying the hierarchy of the content as a whole.

10. Apple

Apple is a peculiar breadcrumb example. While most of the platforms on this list have their breadcrumbs near the primary navigation, 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.

apple breadcrumb navigation example

However, location aside, it’s still a solid breadcrumb design. 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.

The wrap up

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 navigation – 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!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB NAVIGATION
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers