On a Breadcrumb Trail: How to Reduce Bounce Rate Instantly (With Examples)

What are breadcrumbs?

A primary navigation system refers to a website’s main menus, which are typically located at the top of each page. The user may start on the homepage, and then use the menus to reach the pages they are interested in. Here’s what Freshworks’ primary navigation system looks like:

Unlike the primary navigation system, breadcrumbs are smaller and less prominent. They are often found below the primary navigation system. In most cases, they are simply a series of small text links. Here is an example of breadcrumbs from Amazon:

So why would you need two navigation systems? Simply put, a breadcrumb trail gives users an extra way of navigating around a website or app. Breadcrumb trails are very easy to use. In the Amazon example above, you can see that the “sunglasses” category is a subcategory of “accessories”, which is a subcategory of “girls”, which is a subcategory of “clothing, shoes & jewelry”. The breadcrumb design is clear, and leaves little room for misinterpretation or error.

Does every website need breadcrumbs?

You may notice that not every website uses a breadcrumb trail. That’s because the breadcrumb design isn’t necessarily appropriate for every type of site. If your site only has a few pages, breadcrumbs may look redundant, and you probably don’t need them. In this case, you can use only one navigation system. Or, you could use another type of secondary navigation system, such as footer links.

However, if you have a large website with a hierarchy of many different pages, divided into multiple sections and subsections, breadcrumbs may be a useful tool for you. E-commerce businesses are a perfect example of the type of websites that typically use breadcrumbs.

4 Key benefits of website breadcrumbs

Breadcrumbs improve user experience

Jakob Nielsen’s 10 Usability Heuristics for User Interface Design are widely used by UX professionals as a standard for measuring the quality of a product’s design and user experience. Here are a few of the ways breadcrumbs can help web designers meet Nielsen’s heuristics and create a highly-usable design:

User control and freedom

According to Nielsen, prospects need a clearly marked “emergency exit” to leave in case they make a mistake. Breadcrumbs provide this “emergency exit”. If prospects accidentally click on an item, they may use the menu to easily return to the previous section, without losing their place on the site.

Consistency and standards

Breadcrumbs use the same terms as the categories and subcategories of the site. The micro-copy used for breadcrumbs should be simple, colloquial, and easy to understand. Who wouldn’t know what to expect when clicking on a button labeled “sunglasses” or “laptops”?

Aesthetic and minimalist design

Breadcrumbs are small and can fit into a narrow area of the website. They don’t take up much space, and don’t clutter the site’s design with text.

Breadcrumbs reduce bounce rate

A “bounce” is when a user clicks on your site, decides right away that you don’t have what they’re looking for, and leaves. It’s the equivalent of someone browsing in a shop for a few minutes and then walking out the door right away.

So why is it bad to have a high bounce rate? If you have an e-commerce site, a high bounce rate means lost sales. And there could be SEO consequences as well, since there is some evidence that bounce rate may be used as a Google ranking factor.

The user experience benefits of breadcrumbs are directly connected to bounce rate. Because prospects can navigate around the website and find what they’re looking for more easily, they are less likely to bounce. Using the breadcrumb trail will allow them to navigate in fewer clicks than they otherwise would have. This also leads them to have a better overall experience.

Breadcrumbs improve SEO performance

SEO professionals commonly cite breadcrumb trails as a search engine optimization technique for websites. There are several ways breadcrumbs can have a positive impact on SEO, besides lowering the site’s bounce rate.

Just as users benefit from having an easy way to navigate around a site, so do search engine robots (also known as crawlers or spiders). These robots discover content for the search engine by following links around the web. A hierarchy of breadcrumb links creates a clear path for the robots to follow.

As of 2019, Google Search Console has added a new structured data report for breadcrumbs. Google now displays breadcrumb information directly in the search results, and also uses breadcrumbs as a way of categorizing information. It’s clear that search engines value breadcrumbs, especially when they’ve been correctly implemented with structured data markup.

Breadcrumbs may improve conversions

All of the factors above (UX, bounce rate, and SEO) can ultimately lead to an impact on conversions. Sites that are easy to find in the search results, easy to navigate around, and provide a good user experience are more attractive destinations for online purchases. Breadcrumbs are an important part of any conversion rate optimization (CRO) or online marketing strategy.

3 Types of breadcrumb navigation

There are several different types of breadcrumb navigation out there. Here are the most common ones you will see:

1. Location or hierarchy-based breadcrumb navigation

This type of breadcrumb navigation has to do with understanding where you are in a website’s hierarchy. To visualize this, you can have a look at the hierarchy chart of a typical website. The example below is from Canva:

In this example using the fictional Oddball Imaging Studio, you can see that the homepage leads out to several subpages (“Who is Oddball?”, “What Can Oddball Do?”, and “Other Services”). Below each subpage is a series of sub-sub-pages.

If Oddball Imaging Studio chose to use hierarchy-based breadcrumb navigation, their breadcrumb trail would look something like this:

Home > Who is Oddball? > Our Mission

As you can see, the breadcrumb trail helps the user navigate straight through the hierarchy, from more general pages down to more specific pages. This is very useful for people who enter the website via search results, as they’ll arrive on the site at a page that’s lower down on the hierarchy. With breadcrumbs, they can easily navigate back to previous levels or to the homepage.

2. Attribute breadcrumb navigation

Attribute-based breadcrumbs are often used on e-commerce websites. This type of breadcrumb trail helps prospects understand the relationship between different products on the site.

In this example from Amazon, we can see how the relationship between categories goes from more general to more specific.

This gives the user a different way of segmenting products and searching for what they want. If they’re interested in the bag they’re currently looking at, perhaps they’d also be interested in other carry-on bags, or just luggage in general.

3. Path or history-based breadcrumb navigation

Path-based breadcrumb navigation is unique because, rather than being static, it is actually dynamically generated. In this case, the breadcrumb trail shows the individual user the way they specifically have arrived at a given page. The user will see a list of all the other pages they’ve clicked on in order to get to that point.

This type of breadcrumb trail is less common than the other two, because some prospects find it confusing. Essentially, path-based breadcrumb trails are somewhat useful, because they can save the user a few clicks of the “back” button. However, since many prospects navigate around a website erratically, they may be less inclined to use a path-based trail that simply shows the random pages they clicked on in the past.

Best practices for designing a breadcrumb trail for your website

To understand the best practices for designing a breadcrumb trail, we spoke to some marketing and SEO managers for some real-life advice and examples of what breadcrumbs can do.

Make Sure Your Breadcrumbs are Clearly Labeled

Joe Lawlor, Chief SEO Strategist at Digital Dynasty SEO, believes clearly-labeled breadcrumbs act as a sort of “triple back button”, helping the user accomplish more with fewer clicks. “When multiple pages don’t need to be loaded and the breadcrumbs are labeled in a way that reminds the visitor what they were looking at, the speed of purchase rises. I’ve seen an increase of 24% of unique visitors purchasing on their first session averaged over 1 year after adding breadcrumbs on a high traffic [e-commerce] site.”

Use Appropriate Schema Markup

Structured data markup (also known as schema markup) is an important part of search engine optimization. Marko Ivanoski, Co-Founder and Chief Marketing Officer of PoodleHQ.com and Organic-Looks.com, says that using schema markup will “help Google understand your site structure better, and increase your rankings as well.” He adds that “There are lots of free plugins, like RankMath and Yoast, that can help you generate good-looking, customizable and UX-friendly breadcrumbs and implement them on your site just with a few clicks… I especially like navigating through breadcrumbs when using mobile, as it's much faster and easier.”

Use Keywords

To enjoy the full SEO benefits of breadcrumbs, you’ll want to make sure to include keywords in your breadcrumb trail. Dylan Max, Head of Growth Marketing at Netomi, shares how implementing breadcrumbs had a major impact on his website’s organic search visibility. “One of the key SEO metrics we track is visibility on keywords. The gains we saw after 3 weeks of implementing our breadcrumbs sitewide was equivalent to the growth we experienced in the 3 months leading up to the implementation. That's over a 4X increase in velocity.”

3 Creative breadcrumb examples that can inspire you

1. Breadcrumbs that Don’t Look Like Breadcrumbs (Buttons)

Your breadcrumbs don’t necessarily have to be simple text links. Many websites use buttons for a more prominent breadcrumb navigation system. Here’s an example from NASA:

As you can see, the user is in the “Videos” section under the topic of “Aeronautics”. The buttons in this case are highly visible and don’t take up too much space, while still looking like a breadcrumb trail.

2. Vary up the symbols you use

Around the web, you’ll find that breadcrumb trails use many different types of symbols to separate each breadcrumb. Here are some of the most common:

The greater-than symbol: >

The greater-than symbol is often used to represent an arrow in a breadcrumb navigation system. You can see how this is used at Nestle:

The slash: /

The slash is also commonly used as a breadcrumb separator. One example of this can be found on Overstock.com.

The guillemet: »

A “guillemet” is the French-language version of a quotation mark. The guillemet symbol looks like a double arrow, so it’s a creative way to mix things up when designing a breadcrumb trail. Here’s how this looks on Ionos.com:

3. Use color to help the user find their way

One way to make your breadcrumb trail extra user-friendly is to use color in an intuitive manner. The NASA example above is a good demonstration of this. You can see how the overlay of blue on gray helps the user understand where they are in the navigation system.

Another example can be seen on The Guardian ’s website. The breadcrumb menu uses bold text to show the user where they currently are:

And if the user hovers over the menu, the text turns red to help them navigate:

How can a marketing automation software help improve breadcrumb navigation on your website?

If you’re looking to implement breadcrumbs on your website, you’ll want to do it in a way that maximizes conversions and improves user experience. A marketing automation tool can help you understand how to best structure your breadcrumb trail. By understanding user behavior, you’ll be able to lead prospects to the pages they’re looking for, and to the pages that generate the most conversions.

Not all software are created equal. It’s important to choose a tool with advanced marketing capabilities, like Freshmarketer, so your marketing, SEO, and web design teams can better understand your customer. Here are some key capabilities to seek out:

1. Funnel analysis

The marketing funnel is the path prospects follow that leads to an eventual conversion. On your website, you can think of it as the route they take through various pages before making a purchase.

Funnel analysis will help you track the path visitors take through your website, so you can identify missed potential sales. If prospects are leaving your website at a certain juncture, perhaps that signals a problem that needs to be fixed. Or maybe there’s a way to optimize your breadcrumb trail to lead prospects closer to where they should be.

Learn more about Funnel Analysis here.

2. Scroll maps

With Freshworks’ scroll maps and session replay, you’ll be able to see exactly how real customers are using your website or app. You can get targeted audience insights and better understand your customers through anonymized user session recording. The insights you gain will help you create your breadcrumb trail.

3. Heat maps

Another key feature for understanding your users is heatmaps. Heatmaps will show you where customers are clicking, helping you understand which calls-to-action and content are working the best. If a page is generating lower user engagement, it may be better to lead them to a higher-engagement page on the breadcrumb trail.

Create heatmaps today.

4. A/B testing and split testing

Testing is key when implementing any new element on your site. You’ll want to see which designs perform better, so you can get the best results. When it comes to breadcrumb trails, this might mean A/B testing or split testing multiple versions of your landing pages. You can then direct users to the best-performing pages using the breadcrumb trail.

Get started with split testing today.

5. 360° View of customer

Overall, your marketing software should give you complete context on your prospects, so you can optimize your website accordingly. This includes visibility over prospects’ activities on your site, including engagement on page, email open and click-through rates, and automatically enriched social profiles. Based on the insights you gain from a marketing tool, you’ll be able to create the optimal breadcrumb trail for your business needs.

Learn more about unified view of customer.

Final note: Applying breadcrumbs on your website

If you are managing a large website with many pages, sections, and sub-sections, especially an e-commerce website, you should certainly consider adding a breadcrumb navigation system. The benefits to SEO, user experience, and bounce rate are too important to pass up. There’s a reason this system has become nearly universal on large sites around the web.

However, implementing breadcrumbs takes time, money, and effort. For maximum results, you’ll want to have a solid understanding of user behavior before starting out on your breadcrumb project. That’s why a marketing software like Freshmarketer is an invaluable tool for marketing.

Customer Service Suite

Freshdesk

Freshchat

Freshservice

Freshsales

Freshmarketer

Solutions

Our platform

Integrations

What’s New