What Do Breadcrumbs Mean in Web Design?

Posted on September 27, 2019August 17, 2020 by Andy under Website Basics

Like the fairy tale Hansel and Gretel, breadcrumbs leave a trail back home.

Easy and efficient navigation

In web design, breadcrumb or breadcrumb trail is a secondary navigation scheme that improves a website’s overall user experience, particularly its usability and findability of its contents. Simply put, breadcrumbs help you find your way around a website. Instead of clicking the back button many times, breadcrumbs allow you to go to higher-level pages such as the homepage or parent category page in only one click.

The breadcrumb trail is usually found right below the main navigation menu. This placement allows you to immediately see where you are within the website.

Types of Breadcrumbs

There are three types of breadcrumbs: attribute-based breadcrumbs, location-based breadcrumbs, and path-based breadcrumbs.

Attribute-based breadcrumbs

Attribute-based breadcrumbs are typically used by e-commerce sites. This type of breadcrumb shows the specific attributes or features of a particular page or, in our e-commerce example, a product. They show the relationship between products and the categories they belong to and are usually used together with a location-based breadcrumb.

An example of an attribute-based breadcrumb is:

Home > Jackets > Women’s Jackets > Winter Jackets > Textile > Wool

Location-based breadcrumbs

Also known as hierarchy-based breadcrumbs, this type of breadcrumb is ideal for websites with more than two levels in their hierarchy or structure. They are the most common type of breadcrumb used by websites. They show your website’s structure, which is useful for users who landed on one of your deeper-level pages from another source (e.g., a blog post on another website or a search engine result).

If you stumbled upon this post while checking your social media feed, you will find the location-based breadcrumb on the top left side of the page that looks like this:

HowStuffWorks / Animals / Animal Facts

Should you find this post uninteresting, you can easily check out other animal facts or other animal-related topics.

Path-based breadcrumbs

Also called history-based breadcrumbs, this is the type of breadcrumb that is most similar to the well-loved children’s classic. It shows you the history or actual pages you have been to – in the actual order you visited them – before you arrived at the current page.

A common example of a path-based breadcrumb is:

Home > Previous page > Previous page > Current page

This is the least popular type of breadcrumb because it has a tendency of confusing the users. This is because users are very likely to jump from one page to another unrelated page. A realistic example of a path taken by a first-time visitor is:

Home > Products > Testimonials > About Us > Privacy Policy > Locations > Contact Us > Page currently being viewed

So, what do breadcrumbs look like?

A breadcrumb trail is made up of hyperlinks leading to the categories, sections or pages in your website separated by a symbol.

The “greater than” symbol (>) is the most common and most recognisable symbol used in breadcrumbs, separating hyperlinks and denoting hierarchy. Other symbols such as (|), (>>), or (/) are also used by other websites.

Why use breadcrumbs?

These are the top three reasons why you may want to consider using breadcrumbs on your website.

Improved user experience. Breadcrumbs help make your website more user-friendly. They save your visitors’ time. They bring them to the desired higher-level or previous sections of your site with minimal effort on their part. By reducing the number of clicks necessary to go the pages they want, your website makes it almost effortless for your users to use and navigate. They also minimise their risk of getting lost within your website.
Lower bounce rates. Breadcrumbs reduce the percentage of users who exit your website. It does this by offering your first-time visitors different options for exploring your website. If your visitors landed on one of your pages from another site (not through your homepage) and found it irrelevant to their needs, breadcrumbs can increase the chances that they will stay and further explore your site.
Search engine friendly. Google is pro-breadcrumbs because they help this search engine giant understand the structure of your website. Breadcrumbs may also appear in Google’s search engine results pages, which can make your specific page result more appealing to visitors.

Don’t forget your breadcrumbs

Breadcrumbs enhance the user experience of your website visitors. They offer an easier and more efficient way of navigating your website, which can prevent them from exiting your website prematurely. This will ultimately benefit your business because the longer your visitors stay on your website, the higher your chances of engaging and converting them.

Need help with the breadcrumbs on your website? Have a chat to the web design Brisbane experts.