Web Design for Complete Beginners: What Is A Breadcrumb?

What is a breadcrumb? A small but very very helpful feature of a website showing how you found your way to the page you’re viewing. We’ll explain how and why in our QUICK READ guide…

What is a Breadcrumb?

A breadcrumb works very similarly to the true navigation system of a website. The main difference being that the breadcrumb shows the user of the site which page they’re on. The reason for the name breadcrumbs is the fact it shows the user a path similar to the breadcrumb effect/technique shown on many cartoons/stories and TV shows. Many sites online use breadcrumbs as they are a great feature for both SEO and for users tracing back their steps. Typically sites that use breadcrumbs are larger sites with many categories and pages. There are a number of types of breadcrumbs but you would usually find them being used to organise content in a hierarchical manner.

Types of Breadcrumbs

There are three individual types of breadcrumbs. There’s the hierarchy-based breadcrumbs, attribute-based and also history-based. Online you’ll see a small range of all the three different types of breadcrumbs and sometimes even some mixed together.

Hierarchy-based Breadcrumbs

Hierarchy-based breadcrumbs are the main type of breadcrumbs you’ll find online. Typically, they are used on large sites which have many pages and categories. A great example would be Tesco’s website. Each category also has many sub categories. For example, the category ‘Groceries’, would have sub categories called ‘fresh food’, this then would also have many sub-categories. One of which would be called, ‘fresh food’, which again has its own sub-categories for individual types of fruit. For example if you’re looking for grapes, your breadcrumb would then look like this below: Home > Fresh Food > Fresh Fruit > Grapes This makes it easier for users to go back to the categories of fresh fruit and fresh food, which are higher pages within the website.

Attribute-based Breadcrumbs

Attribute-based breadcrumbs are mostly found on a product site where a lot of similar products are sold, such as a property site. What does the attribute breadcrumb do? Show the filters used on a site by a user. This will then show all products using the filters. You can then make a broader search using the same filters by going back to just the filters using the breadcrumb. A very easy navigation technique. A perfect example of a site that uses this type of breadcrumb is PropertyPal. If you were searching for a property within Belfast with 2 bedrooms and costing £450 a month at most to rent. The breadcrumb would look something similar to the below: Home > Property to Rent > £450 Max, 2+ Bedrooms > County Antrim > Belfast From the above example you can see that the attributes have been included within the breadcrumb. Many other examples would put in place of the > a forward slash ‘/’ instead to show that the attributes are not in a kind of hierarchy. This will help separate the attributes as in the above example the two filters are not separated.

History-Based Breadcrumbs

The final type of breadcrumbs are history-based. They work very similar to hierarchy breadcrumbs as the hierarchy breadcrumbs and vice versa. The only difference between the history-based and hierarchy-based breadcrumbs is that the hierarchy can change between each part of the breadcrumb. Not many sites have this style of breadcrumb, preferring the hierarchy breadcrumb instead. An example of this breadcrumb in action could be on a clothing website. Men > Men’s shoes > Trainers > Adidas > Boots > Women’s Boots In the example above the breadcrumb has kept the history of the user switching between categories and pages on a website. The user has switched between pages of lower and higher importance on the site but has kept the same order of when the user was on each page. If this site used the hierarchy breadcrumb, the breadcrumbs would look similar to this:

• First breadcrumb – Men > Men’s shoes > Trainers > Adidas
• Second breadcrumb – Boots
• Third breadcrumb – Women’s Boots

The above examples show what the hierarchy breadcrumb would look like on a site that uses a history breadcrumb. It will show a number of different breadcrumbs due to different pages having a higher significance on the site.

Why Use Breadcrumbs?

There are many benefits to using breadcrumbs on your site, from SEO benefits to user benefits to lowering bounce rates on your site.

Breadcrumbs for SEO

One of the biggest benefits of breadcrumbs? Their SEO value. With breadcrumbs it makes it easier for search engines to figure out your site’s structure. It also makes it easier for the likes of Google to show many of your sites pages in their search engine results. Users will not need to enter your site from the home page as they can enter from other pages within search engine results.

Breadcrumbs for Users Experience

Secondly, breadcrumbs give your site a more friendly user experience for your users. Users can then navigate through the pages they have already been on without needing to hit the back button. It will form a much easier layout for you users and they will not get lost as easily within your site. As that can happen easily if you have many pages on your site. Bounce rates on your site will drop, sometimes significantly. This is because users have an alternative way of browsing your site without needing to go back to the search engine or browser.

Breadcrumbs for Conversion Rate Optimisation

Lastly, with the help of breadcrumbs allowing users to access a site from one of the many pages a site has to offer. This is crucial for conversion rate optimisation (CRO). Why? Well, there’s a direct correlation between how easily a user can find a page and how likely they are to take an action. This is particularly true of users who are at a midpoint in their buying journey. More specifically, users who are weighing up a bunch of different products. Say for instance you want to buy a new set of kitchen knives, but you’re not sure which one to go for. History-based breadcrumbs make it a lot easier to move back and forward between the different options in contention. This will increase your likelihood of actually going back and purchasing your preferred option.