How To Use Breadcrumbs In Your Web Design

Many aspects of web design are so well-placed and commonly used that we don’t even notice them anymore (if we ever did). Good web design – and particularly good navigation – shouldn’t draw attention to itself, but should instead serve the content and be intuitive and almost invisible as a result.

Breadcrumbs are a great example of this. Chances are that a vast number of websites you’ve visited use breadcrumbs in some forms or other; but even though you probably used them, you might not have given much thought to what they were or just how effective they can be.

An Introduction to Breadcrumbs

So what are breadcrumbs? Essentially breadcrumbs refer to a ‘trail’ of links that show the progress you’ve made through a site. These are especially important if your site has lots of categories and pages, as it prevents your users from getting lost, while at the same time reminding them what they’re looking at and what the context of any given article is. Usually, these are found along the top of a page, just below the menu. They might look something like this:

Home > Categories > Men’s Clothing > Casual > Jumpers

In this scenario, you would be looking at casual jumpers for men and you would have found your way to this page by selecting various categories starting at the home page. At a glance, the breadcrumbs show you how you’ve progressed through the site and they suggest that there are more options for casual men’s clothing, or even women’s clothing, if you were to head back a few steps.

This would be an example of ‘path-based breadcrumbs’, meaning that they show the steps that a user has taken through your site. At the same time though, they are also an example of ‘location-based’ breadcrumbs, seeing as they show the location of the page within the hierarchy of your site. They are also ‘attribute’ breadcrumbs as they explain the attributes/category of that page. Breadcrumbs can be any of these three types, or all three at once as in this example.

The Benefits of Breadcrumbs

There are many benefits of breadcrumbs. For starters, they can be incredibly helpful for someone landing on one of your pages who came from a search engine. If someone searched for jumpers, they might not realize that you also sell other clothing without some kind of banners. Breadcrumbs are an efficient way to immediately communicate to someone where they are in the broader context of your site and what else they might find there.

Likewise, breadcrumbs offer links that specific users are likely to want access to, without swamping a page with every possible option. They are logical and intuitive to understand and they allow you to use more minimal menus elsewhere.

Best Practices

Generally, purely ‘path based’ breadcrumbs aren’t considered particularly useful as they only serve the same purpose as the forward and back buttons. Thus, breadcrumbs should mostly be used by sites that have clear hierarchies and categories for their content.

All in all, breadcrumbs need to show a logical hierarchy and should always remain consistent. In 99% of cases, this means they should degrade naturally from the home page to the current page. Keep them small and put them at the top of the page near the other navigation buttons. It’s also a good idea to somehow highlight the currently active page.

For more inspiration, see these excellent examples.