12 Best Practice Tips for Breadcrumb Trails

I’ve been thinking about breadcrumb trails this week, which has led me to delve a little deeper into the world of breadcrumb navigation. Read on to find out what the best practices are for implementing breadcrumb trails and see if yours measure up.

What is breadcrumb navigation?

In the deep forest of your website, breadcrumb trails do for your visitors exactly what they almost did for Hansel and Gretel – they are laid out to guide your customers around your website no matter where they go. Specifically, they are most useful on deeper pages within your website, such as lower level category pages, product pages or blog posts, providing users with a way back to where they came from so that they can backtrack, take a new route and continue exploring. Of course, unlike in Hansel and Gretel, your breadcrumbs won’t be eaten by hungry birds, and your customers are unlikely to be captured by a witch who lives in a gingerbread house with sugar windows and candy fixtures.

How should your breadcrumb trail be structured?

The easiest way to explain breadcrumbs is to show you an example. Rather fittingly, here are the breadcrumbs on the Baking Mad website – this particular page contains a recipe for eggy bread.

As you can see, the breadcrumbs relate back to higher-level categories on the website, so if you’ve navigated to this eggy bread page, from here you can go back to see all sweet dough recipes, all bread and dough recipes, or all of the recipes on the website.

Why are breadcrumb trails useful?

Breadcrumb trails are great for the user because they help them to find other pages that could be useful to them. They also help users to see the structure of the website and exactly where they currently are within that structure. They are particularly helpful if a user has landed on a page from an external source, so they can see exactly where they are in the website and easily navigate from there. Breadcrumbs show people where they are, where they could be, and allow them to use fewer clicks to get there.

But breadcrumb trails aren’t just useful for your site visitors – they’re great for SEO, too. Internal linking within your website helps bots such as Google to crawl your site more easily. These links also help you to let Google know how important a web page is – the more links a page has leading to it, the more important it is likely to be, and both internal and external website links count towards it. In our example, the Bread & Dough Recipes page will have lots of internal links to it because the link will appear in lots of breadcrumb trails. The eggy bread page and every other recipe in the Sweet Doughs category will link back to it. But Sweet Doughs isn’t the only sub-category for Bread & Dough Recipes; there are a total of ten recipe types with 220 individual recipes within them – all of which will have a link back to the Bread & Dough Recipes page. The same can be said for every sub-category page and the recipe page itself, and all of this internal linking can help towards improving SEO for these pages.

Top tips for tasty breadcrumb trails

All of this is to say that your breadcrumb trails need to be useful for your users and for search engines if they are going to work well. Here are twelve tips for making sure your breadcrumb trails are working hard enough for you:

1. Only use breadcrumbs if it makes sense for your website

If your website only has a handful of pages, you may not need a breadcrumb trail. Or if your website doesn’t follow a hierarchy structure, it may not make sense for you to use breadcrumbs. Only employ them if it will help your users to navigate your website.

2. Decide which type of breadcrumb trail you need

There are three types of breadcrumb trail – location-based, attribute-based and history-based. In this blog post we’ve mainly been focusing on location-based breadcrumbs, which show users where they are in the hierarchy of the site. Attribute-based crumbs are similar because they show users which category the page comes under, which you may want to use on your product pages. History-based breadcrumbs show users the path they took to arrive on the current page, so they are a little different and may be useful on websites with a more complex structure. Consider which type of breadcrumb will be most useful for your customers.

3. Put breadcrumbs at the top of the page

I’ve never seen breadcrumbs anywhere but at the top of the page, and that’s where people expect to see them. Having said that, the Apple website has breadcrumbs at the bottom of the page. But for most of us, rather than trying to be quirky, I’d recommend making life as easy as possible for the customer.

4. Follow the structure of your website

Ideally your breadcrumb trail will follow the same structure as your website, so that if a user is looking at a page deep within your site, they can navigate to more top-level pages and find other useful information easily. As we’ve seen in the example above, this might mean providing links to each category level. For articles and blog posts, this will help people to find new articles of interest within their already chosen subject. For ecommerce sites, it can help people to find products they want to buy. Imagine if the Baking Mad example was selling bread online, rather than providing recipes to read. After reading through the eggy bread page, you might decide that actually you don’t want to buy the eggy bread, but you do want to look at other sweet doughs and purchase one of those. A good breadcrumb trail will take the user to a page which shows them more options they might be interested in. It will also show users every level between the homepage and the page they are currently on.

5. Put the highest level link on the left and the lowest on the right

Your breadcrumb should progress from high to low, with the beginning of the chain will be on the left-hand side. This will show users how they have progressed on their journey through your website.

6. Use the same wording in your breadcrumb trails and page headings

To make your website as easy to navigate as possible, ensure the page titles in your breadcrumbs reflect the headings you use for those pages. For example, if the page name is “Bread Machines”, don’t refer to it as “Bread Makers” in your breadcrumb trail. Keep it simple and consistent.

7. Use breadcrumbs on every page

We are consistent in our belief that it’s good to be consistent – if you’re going to use breadcrumbs on some pages, use them on every page.

8. Don’t use breadcrumbs to replace other navigation menus

Breadcrumbs are extremely useful but should be used alongside rather than in place of other menus.

9. Make your breadcrumb trail clickable

It might go without saying because we have discussed breadcrumbs in terms of internal linking, but make the pages in your breadcrumb trail clickable so that the user can go back to any of the listed pages with ease. Don’t just show the user the possibilities of where they could go next. Take them there. But don’t make the current page clickable in your breadcrumb trail, as of course all it will do is refresh the page, which isn’t helpful for the user.

10. Make the current page stand out

Perhaps using a bold or different coloured font, make the current page stand out in your breadcrumb trail so the user knows that’s where they currently are.

11. Clearly separate each level

Breadcrumbs can employ a range of indicators between pages or levels, such as the “greater than” character ( > ), forward slashes ( / ), pipes ( | ) and arrows. Whatever you choose, ensure the user can clearly see and understand the different levels within your breadcrumb.

12. Make it subtle and in-keeping with your design

Users don’t need to see your breadcrumb trail unless they are looking for it, so there’s no need to make it stand out too much. Aesthetically, it should fit in with your website design, but it should also be easy to find when people need it.

Like many website features, breadcrumb trails can serve you well for multiple reasons – helping you to improve your website design, user experience, SEO and conversion rate optimisation, to ultimately reach your business goals. If you would like help in any of these areas, get in touch with SilverDisc.