We all have heard the folktale, Hansel and Gretel. When children get lost in the forest, they use pieces of breadcrumb to mark the road back to their home. In web design, “breadcrumbs” are like a path – or breadcrumbs trail – back to the main part of your site, named after the children’s path home.

What is the meaning of breadcrumbs?

The idea of a breadcrumb strategy is to use a visual navigation tool to help people find their way around a website’s content and how to return to an earlier page.

They are useful on sites that have a lot of pages containing a lot of content, and the pages that are organized in a hierarchical way. However, simple websites with fewer pages are more useful.

That is the hierarchy of the website. It is a method of website architecture that is commonly used. For instance, the information on this website is organized like a tree, with new content branching out from the main content.

website structure

Source: Icon made by ITim from www.flaticon.com

Some examples of breadcrumbs.

Breadcrumb navigation is primarily a visual tool, with the result that it is often easier to show. Take this example from furniture superstore Ikea:

ikea breadcrumbs

This store has a huge number of products, and you can view them by item or by room. The breadcrumbs that are at the top of this page remind the user that he is viewing kids’ textiles. But if he clicks on the icon to return to the previous step.

  • Kids
  • Baby and children.
  • Products

Why should I allow breadcrumbs to be placed on my website?

If you have lots of pages that are organized in a hierarchical manner, then breadcrumbs are a good choice for you.

There are no hard and fast rules, but the following sites that utilize breadcrumbs successfully include:

  • Ecommerce sites with many listings of goods.
  • How-to sites related to how to do something.
  • Sites that are educative.
  • Sites that are financial.

On the web, many kinds of websites contain a lot of content, and they are organized in a logical path from the main pillar pages to more specific pages. That is the reason that a website breadcrumb strategy is useful.

What are the benefits of using breadcrumbs?

The breadcrumbs trail is not just a good stylistic choice. It is also very useful as part of your user experience.

Here are some of the key benefits of using breadcrumbs to navigate.

Breadcrumbs are a handy tool for visitors to know where they are on a website. When someone uses the Ikea example above, she may decide that she does not want to view the bedding, but she does want to see other children’s products. By clicking on the breadcrumbs, she is able to navigate to the page that she wants.

Decreases the bounce rate.

Customer confusion or an inability to find what they are looking for are two leading contributors to a high bounce rate.

Breadcrumbs allow customers to quickly move around your site and make it more likely that they will stay longer and make a purchase, subscribe to an email list, or take any other action that they want to.

Reduced the number of clicks required to return to higher level pages.

If you have a good web design, it will encourage people to keep browsing. By making it easy for people to jump back to a higher-ordered page with minimal clicks, web designers can get more traffic to key pages on their site.

It also conserves screen space.

No one wants their websites to be cluttered. Customers also want to find what they need quickly.

Breadcrumbs is a simple navigation system that uses a simple design that doesn’t take up a lot of space. That makes it interesting for both customers and web designers.

When are we not supposed to use breadcrumbs?

If your website doesn’t have that many pages or if your pages aren’t arranged in a hierarchical manner, adding a breadcrumb trail to your site is a useless tool and it is best left out.

when not to use breadcrumbs

The above example is taken from author Jon Acuff’s website. So far, this site has only a small number of pages, and they all fit comfortably into the main navigation menu.

There is no hierarchy on the site. Visitors do not always proceed from “About” to “Books” or “Speaking” in a certain order.

The designers of this site decided to not use breadcrumb navigation, because it was unnecessary for this type of site.

Breadcrumbs and SEO (Contentious SEO)

A breadcrumbs trail can also aid your SEO.

Google uses breadcrumbs to organize information and can also display your breadcrumb trail in search results. Breadcrumbs SEO allows Google to understand and index your pages more accurately, which enables searchers to find and match them better.

What the ux benefit will do for you will be to increase your seo rankings because you will decrease your bounce rate and you will have longer customer interactions with your site.

Is it possible to apply breadcrumbs best practices?

When done correctly, breadcrumbs can enable users to enjoy your website.

When you are designing your breadcrumbs navigation, there are some best practices that you should adopt.

Put this at the top of the page.

People are comfortable with things that are familiar, so it is expected that breadcrumbs are placed at the top of the webpage.

When people realize that they want to go to a different page, they scroll to the top of the page. Keeping the breadcrumbs at the top of the garden encourages users to easily find what they are searching for.

Use vocabulary or phrases.

It might seem creatively appealing for images to be used on a breadcrumb menu – but don’t do it. It is very confusing, because images can be ambiguous. On the other hand, the “home” icon could be an exception, because it is very ubiquitous.

So, stay within a short phrase or single word. This would be the logical layout of a clothes website, like: home > products > men’s clothing > pants > jeans.

It is essential that you add value to the user experience.

When it comes to website breadcrumbs, it is not automatically the best choice for every site. If you have a very small number of pages, a breadcrumb menu is going to clutter up your pages, unnecessarily.

Use breadcrumb navigation only when it really enhances the user experience.

While UX design gets into the minutiae of what kinds of menus to use and when, it’s generally true that if your breadcrumb menu is only two or three steps long, you don’t really need it. You can also use the header of the main navigation or even a hamburger menu for the same purposes.

Be brief!

Do not use long phrases that will not fit in a short row. A step that says, “All men’s winter clothes sizes s-xxl” is too long.

Do not try to add unnecessary pages to your website in the hopes that it might look better – it will just cause your website to look cluttered.

Hierarchical

Then the breadcrumbs should lead the visitor to a page that is higher-ordered. What’s important is that the first breadcrumb on every page should always be the home page, because that allows the user to know exactly where she is on the page.

Each breadcrumb should start with a parent page and then sequentially list the child pages that come after, even if a visitor came straight to a lower-ranked page from a search engine or direct link.

Use a space separated by one character (or >).

When you want to stay consistent and familiar, put a one-character separator between each breadcrumb.

The characters that are special like the characters > and * are very common because they suggest arrows. Avoid using slashes like – or | or \ because they aren’t directional and don’t visually communicate the progression from parent pages to sub-pages.

What are the types of breadcrumbs?

There are three types of breadcrumbs that people can use for web pages. Think carefully about what your users are intent on and what they are experiencing with your site, and decide on which kind of ad campaign is the best one for you.

Location-Based

Location-based breadcrumbs are important for identifying the pages that are different, much like subfolders that are on your computer.

On the most popular types of trails, there are chalk lines on the breadcrumbs that allow visitors to know where they are on the site and what they should do.

location-based breadcrumbs

For example, the above screenshot was taken from Connecticut’s state parks and forests website.

Through location-based breadcrumb navigation, this visitor arrives at a sub-page of the Connecticut State Government website.

Attribute-Based

Sometimes websites with many pages have attribute-based breadcrumbs, in order to group similar pages (usually product listings) together based upon the characteristics that the visitor has specified. It allows the customer to know what type of items they are viewing.

attribute based breadcrumbs

Amazon is a good example of that. There are numerous pages on the site, and most of them are irrelevant to customers. An attribute-based breadcrumb trail at the top of the page of a product listing page shows the customer that she is looking at the right categories of products. In this case, they are looking at digital cameras for beginners.

So, customers can quickly see whether they are in the wrong category and then go back one or two steps to remove all the filters that they have applied so far.

Customers may decide that they would like a digital camera but not a point-and-shoot – but they will just click one step earlier on the breadcrumb trail to get to the right category.

These are similar to geographically-based breadcrumbs. But the big difference is that people can usually customize attribute-based breadcrumbs just like they do with search filters.

Path-Based

Also known as ‘history-based’, this breadcrumb design shows users the path they traveled to arrive at your site.

These are generated based on the user’s navigation.

These are the least common types of breadcrumbs that web designers use, because they are often confusing and make the content of their pages unimportant by using the “back” button.

According to some, the popular “back to results” button that allows shoppers to return to a customized list of search results without losing their filters is technically a path-based breadcrumb.

You can see an example of it on Etsy.com. This site features dozens of search filters, and the “back” button often invalidates all of them. However, the “back to search results” button greatly improves user experience.

path-based website breadcrumb

How can we create breadcrumbs?

Luckily, creating breadcrumbs is fairly easy. The kind of site that you are building will depend on the construction method, so in this post we will breakdown three of the most popular platforms for you.

In WordPress, the theme is called ‘Myth’.

WordPress has many plugins that can help you create breadcrumbs, and you do not have to write the code yourself.

So many sites are now using breadcrumbs, and that has caused WordPress to have a huge number of plugins. Some examples of some good ones are:

  • All in One SEO (free version has breadcrumbs enabled)
  • Breadcrumbs on a trail.
  • Yoast
  • Woocommerce crumbs.
  • NavXT

Then, of course, plugins are not able to do everything for you. You may need to modify the breadcrumbs html to achieve the look that you are looking for.

This is accessible by going to the “seo” tab on your plugin.

Here, you can change options like your margins or your special character separator using basic HTML.

Wix is another platform.

Wix is slower at introducing breadcrumb navigation to its sites.

Currently, you can automatically add a website breadcrumb menu in Wix Stores, but not on other types of sites.

When you want to add a breadcrumbs trail to Wix, you will have to add it manually to the site’s code.

The Wix Forum offers several code templates that you can use to manually add a breadcrumb trail to your site. On the bright side, HTML breadcrumbs are more customizable than automatically generated ones.

It is possible to choose from all three types of attributes (path, location, and attribute). Copy the one you want and paste it into your site’s code while making your own stylistic changes.

On Shopify.

It is easy to add breadcrumbs trail to Shopify. When you are customizing your theme, click on “Cart” and choose “show Breadcrumb Navigation”.

With this approach, you have fewer customization options, but Shopify is almost exclusively focused on ecommerce sites, so a template works pretty well.

Shopify instructions for adding website breadcrumbs

The Shopify Help page has simple instructions, pictured above.

I believe that breadcrumbs can be used to improve the user experience and SEO.

If you are still deciding whether or not to put a breadcrumb trail on your site, you may want to ask yourself this question: what are breadcrumbs really for?

The goals of your SEO efforts are to ensure that your visitors are able to navigate around your site more easily. If your breadcrumbs menu does not help your users, there’s no reason to overcompliment your web design.

Because some ecommerce sites have many pages that are more than 3-pages deep, putting breadcrumbs in their paths can help your SEO rankings and also help your Seo score with Google.