Breadcrumbs Navigation

What is breadcrumb navigation?

Breadcrumb navigation is a way for users to visualize their location on a website. It’s a secondary navigation bar that typically appears as horizontal text links, separated by an angle bracket. Breadcrumb navigation improves the findability of your landing pages, and helps users reach higher-level pages faster if they initially found your site from search or a deep link.

Breadcrumb Types

Path

Path-based breadcrumbs indicate the steps or path; a user has taken to arrive at the current page of a website. Furthermore, users will see links to pages they have previously visited to reach the current page.

Out of the three types of breadcrumb navigation, Path-based breadcrumb navigation is least popular online. The reason being, Path-based breadcrumb navigation provides similar functionality to the “Forward” and “Back” buttons on a browser.

For most websites, Location-based and Attribute-based breadcrumb navigation offers better functionality.

Location

Location-based breadcrumbs indicate to the user where the current page stands in the hierarchy of the website.

This type of breadcrumb navigation is most commonly seen on sites with more than two levels of depth or content.

Upon moving further into a website, users are provided with links to pages or categories that act as a “parent” or a level up from the page they are currently viewing. For example, a user may be on the “Speak” page.

However, the “What we do” page is a parent of the “Speak” page while the “Home” page is a parent of the “What we do” page.

Clearleft Ltd

Attribute

Attribute-based breadcrumbs indicate to the user the attributes or categories ascribed to the current page within a website.

Often seen on e-commerce websites, products may not only fall into a category but under specific attributes as well.

For example, a vehicle may be categorized as an SUV then have the attributes of being the color black and released in the year 2016.

Cars.com

Why Use Breadcrumbs?

Great usability

Breadcrumbs provide an additional means by which users can easily navigate a website. If a user lands on an internal page on your website from another source, breadcrumbs will allow the user to see exactly where they stand within the site’s hierarchy.

User is also given the opportunity to move up to a higher level of the website at any given time without any hassle.

Easy to back-track

Primary navigations are not designed to be followed backward were breadcrumbs are. Since back-tracking is extremely popular online, providing a little additional help can go a long way.

Eliminate additional clicks

Breadcrumbs allow users to jump from one level of a website to the next without having to use the “forward” or “backward” buttons on the browser. Additionally, breadcrumbs eliminate the need for users to resort to the main navigation continually.

Shows users hierarchy

The primary navigation of a website will not reflect the hierarchy of every page within site. Giving users breadcrumbs will allow them to see the hierarchy of a page within a website.

Visually pleasing

Not only do breadcrumbs provide users with additional usability, but they also do so without taking up much room or space on the page. Breadcrumbs are easy to implement into the visual design of your website and provide a great benefit to users.

Provides additional help

It is entirely possible that some users may not understand how a website’s primary navigation works, and in some cases, users may not even know what they are looking for.

Giving users breadcrumbs will allow them to see the overall progress and structure of a website, thus allowing them to navigate the site better.

Lower Bounce Rates

Typically breadcrumbs will provide more detailed navigation than the primary navigation. In doing so, users will be given more options on how to navigate a website. Allowing them to back-track a few levels within the site quickly will lower your bounce rate.

Builds interest

When a user lands on an internal page of a website, odds are they are already on a page of interest. Breadcrumbs may provide links to additional pages and information of which the user is also interested in without making them start from square one.