If your website has a lot of pages and a complex content hierarchy then a breadcrumb navigation is a must.
But what are breadcrumbs in website design exactly?
At the simplest level, a breadcrumb navigation helps reduce the number of actions that need to be taken by visitors to get to higher-level pages than the one they’re on. They follow a website visitor’s location making it easy for them to get back to where they came from.
To learn more about breadcrumbs and how best to use this type of navigation on your website, keep reading!
What Are Breadcrumbs?
Breadcrumbs are part of a secondary navigation called a breadcrumb navigation or trail. They’re used on websites and apps to help visitors see the pages that lead to the page they’re on.
Breadcrumbs help visitors find their way back from the page they’re on to the page that brought them there. If the page they’re on was the first page they landed on, for example, by clicking a search engine link, it shows them the higher-level pages related to that page. This allows them to easily go to those pages for information.
Breadcrumbs offer visitors the following information:
- Where they are in relation to the website’s hierarchy.
- Where they can go to get more information. By showing higher-level pages that provide more information relating to the page they’re on.
- What else they can look at. A visitor may decide they aren’t interested in the product page they land on, for example. But they can easily see where to go to see more similar products.
Why Use Breadcrumbs?
The following are some main reasons as to why you should use breadcrumbs in your website design.
Reduced Number of Clicks
Using a breadcrumb navigation means that website visitors don’t have to use a browser’s “return/back” button to get to previous locations. They can simply click on the breadcrumb navigation to get to the page they’re looking for.
For example, if they’ve gone through four pages, they don’t have to click back four times to get to where they began. They can just click once on the page in the navigation.
Reduced Bounce Rate
If the visitor found the page they’re on through search, social, or email, they can see the breadcrumb trail with the higher-levels pages that lead to the page they’re on.
This could entice them to click on these categories to learn more or see more pages under each page in the navigation. This makes them less likely to leave and can help reduce bounce rate.
For example, a visitor may have seen a search link for a style of handbag they are interested in. However, once on the product page, they quickly realize it’s not what they’re looking for.
Without a breadcrumb navigation, this may cause them to quickly exit the page, contributing to bounce rate. However, they may see the breadcrumb trail with the category “handbags” and decide to see what else the store offers, keeping them on the website.
User Friendliness
If you have a lot of pages on your website and a complex hierarchy of content then a secondary breadcrumb navigation is a great way to boost usability.
Visitors can easily return to the page they came from and can find higher-level pages to the one they’re on without needing to search for them themselves.
It Doesn’t Take Up a Lot of Space
A breadcrumb navigation takes up very little space on each web page so it can be used with any website design.
The minimal nature of this navigation also means that it won’t make our page look cluttered or overwhelming to visitors.
When to Use Breadcrumbs
Breadcrumbs should be used on websites with a lot of content and a clear content hierarchy structure. For example, e-commerce websites are a good candidate for breadcrumb navigation.
It should always used as a secondary navigation though. Never use a breadcrumb navigation to replace your primary navigation.
Breadcrumbs don’t need to be used for single-level websites with no or a minimal hierarchy.
For example, if you offer a select number of services with your homepage leading to one page for an overview of each service and no other pages after, then you don’t need breadcrumb navigation.
70% of consumers learn about a company through its blog versus ads. Learn more about Why Your Business Needs a Blog.
Types of Breadcrumbs
There are three main types of breadcrumb navigation that can be used: attribute-based, location-based, and path-based breadcrumbs.
Attribute-Based Breadcrumbs
For attribute-based breadcrumb trails, each breadcrumb is based on the attributes of each page. It will show the category or “attributes” of each page you’ve been on.
For example, the attribute-based breadcrumb trail on a footwear website may look like this:
Women’s Footwear > Boots > Heeled Boots
Location-Based Breadcrumbs
Location-based breadcrumbs focus on a website’s structure. They show the website’s hierarchy and which higher-level content naturally comes before the page the visitor is on. The navigation that will show has nothing to do with where the visitor has been previously.
This is helpful if visitors arrive on a deep level page via a search engine or social media for example. They can easily see which higher-level pages came before for more information.
Path-Based Breadcrumbs
Path-based breadcrumbs show the pages that the visitor has been on to get to their current page. These are dynamic trails, showing the pages each user has been on so can be quite different for different users.
Breadcrumb Navigation Design and Best Practices
If still unsure if your website will benefit from breadcrumb trails or how to best implement breadcrumbs, keep the following in mind.
Don’t Use Breadcrumbs When You Don’t Need To
If your website doesn’t have a lot of content and a lot of category pages/a complex hierarchy, you shouldn’t use a breadcrumb navigation.
Doing so can be overwhelming and both the primary navigation and breadcrumb navigation will look very similar.
Use Breadcrumbs as a Secondary Navigation
Always use breadcrumbs as a secondary navigation, not as the main navigation.
This secondary navigation should offer an easy way to get back to previously viewed content. However, you still need a main navigation with links to high-level pages.
Use your breadcrumb navigation in addition to that main navigation as visitors begin going through the content hierarchy.
Use Breadcrumbs Only When Pages Fit into One Category
Breadcrumb trails follow a linear structure. That means that to use them effectively, you need to categorize all content into categories.
If some of your lower-level pages can be put under more than one parent category then using breadcrumbs will not be effective but instead will be confusing and inaccurate.
Email generates $42 for every $1 spent. That’s an astounding ROI of 4,200%! Start reaping the benefits of email marketing with our Beginner’s Guide to Email Newsletters filled with tips on creating a successful email newsletter campaign.
Separate Link Items
Each breadcrumb link on your navigation needs to be separated. This is most commonly done using the greater than sign (>). However, you can also use slashes,
arrows, or right-angle quotation marks.
Choose whatever style you like best but make sure you use some type of symbol to separate each link.
If there isn’t a hierarchical relationship between breadcrumbs, don’t use greater than but generally there will be this relationship present.
Don’t Link the Current Page
The page that the visitor is on can be placed in your breadcrumb navigation or not, that’s up to you. But never link it if you do include it.
Navigation Size
Keep your breadcrumb navigation relatively small, at the top of the web page below the main navigation.
It needs to be smaller than your primary navigation with smaller fonts used and use muted colors such as black for the text.
However, do make sure there is a reasonable amount of spacing between each breadcrumb.
In Conclusion
If you have clear categories on your website and lots of content under those then adding a breadcrumb navigation is a great idea. It will help visitors easily find their way through your web pages and can direct them to more products or services that meet their needs.
If you’re looking for some help implementing a breadcrumb navigation or optimizing your website in general, why not get in touch with Brand Hause?
We offer a range of web design services to meet all your needs and can help with SEO too! Contact us today for a free website design consultation to learn how we can take your website to the next level.
Need a website designer that can create intuitive user experiences that increase customer loyalty, and create sustainable growth for your business?
1 thought on “What Are Breadcrumbs in Website Design?”
Nice blog here!