An Introduction to Breadcrumb Navigation

Web design has come a long way. Gone are the days when a collection of a few static pages would complete a website. As of now it is about the ever-growing model of content creation that exponentially increases the depth of a website. A simple website can become the go-to hub of information in only a few months time. This is when the complexity of that website increases and it becomes necessary for the webmaster to handle the same.

Reducing complexity is an art and a “breadcrumb” is one tool that designers love to use. Breadcrumbs act as the navigational device for a website visitor. When used smartly, breadcrumbs make website navigation effortless. This article will enlighten you about the basics of breadcrumbs and help you understand the importance of breadcrumbs in your upcoming web design.

Why the word breadcrumb?

It has something to do with the tale of two siblings, Hansel and Gretel, who were tricked into a house made of cake and candy. They were threatened by the owner of that dream home – a witch! In that story, the kids drop breadcrumbs to create a trail from their home which they use to escape the witch and get home. Just like the real breadcrumbs that helped those kids find their way out, breadcrumbs in an application helps users trace their path back to their starting point.

If you still don’t understand what breadcrumbs are then see the image below. The navigational links that are circled are the breadcrumbs that Google uses for the navigational ease of its readers.

Google Breadcrumbs

Why breadcrumbs?

That, I agree, is a smart question! When your client (or readers) do not ask for breadcrumb navigation why should you use it?

Breadcrumbs are performers nibbling in the corner of your design. Removing breadcrumbs might leave your design unchanged but they do matter when used smartly. Please understand that it isn’t the client who will tell you if they want breadcrumbs or not. It is your genius that should decide if a particular design requires breadcrumb or not. They will make a design more intuitive for users.

Should breadcrumbs “blindly” follow the fairytale model of Hansel and Gretel?

That is one question that people ask me often. In our (aforementioned story) the two kids, Hansel and Gretel, walk through the mystifying forest, dropping breadcrumbs with a hope of finding their way out.

It is often an invitation to confusion when you take metaphors too far especially in the case of user interface design. If breadcrumbs were to follow the fairytale model of Hansel and Gretel without any modifications per se then it might just add to the complexity of any app design.

Let me take the case of a regular 1WD reader:

  • Starts from Home Page.
  • Clicks on the category “WordPress” from menu.
  • Clicks on the sub-category “Showcase” from the drop down menu.
  • Suddenly changes mind and navigates to “Freebies” category.
  • Finally, checks the “About Us” page out of curiosity.

Can you imagine the breadcrumb navigation that this will result in if the fairytale was being literally followed? Here is a quick glance at what it would look like:

Will you want the breadcrumb navigation like above? Dainis, founder of 1WD, would never want any 1WD reader to believe that Freebies is a sub-part of Showcase when it actually isn’t. Such breadcrumbs (ideally called “Dynamic Breadcrumbs” in Internet lingo) often end up confusing the user. Remember, we are trying to use breadcrumbs to help the user discover the correct path to home and not the path that they have followed.

Pros of using breadcrumbs

As already mentioned before, removing breadcrumbs from your design might not bring many visual changes to your design but they surely add up to the much wanted user experience. Here are a few advantages of using breadcrumbs:

  • User Experience: That is the major reason why a designer might want to use breadcrumbs in an application. They simply add up to the overall user experience of any design. You don’t have to think about the navigational structure in a design when you have breadcrumbs helping you with the same.
  • Reduce in useless page views: Users usually use the browser back button in order to track back their paths. In such cases they hardly stay on a page that comes by while clicking the back button because their goal is some other page. Breadcrumbs reduce such views!
  • Increases average time on website: Once a user visits an internal page of a website directly using a search engine then either he has the choice of closing the window after his job is done or navigating to other related pages of the same website. This is when breadcrumbs help the user navigate to related stuff on that website. Henceforth, the average time that the visitor spends on the website multiplies.
  • Small in size: Usually breadcrumbs are pretty small in size and nifty to use – unless you do something very unusual with them!

Cons of using breadcrumbs

Everything has its dark side and breadcrumbs aren’t any different!

  • Dynamic breadcrumbs (explained above) add to the navigational complexity of an application.
  • Using breadcrumbs where they aren’t required simply adds to confusion. Consider the example of 1stWebDesigner itself. This website has two menus in its header that are more than enough to help users navigate through the complete website structure. We really don’t need breadcrumbs here (hence you don’t see them!)
  • Using breadcrumbs as the only source of navigation can lead to information hiding. Breadcrumbs help the users navigate to home page. It can never help the user navigate through every possible content present in the website. You got to have menus for that!

NOTE: It is solely the choice of a designer when it comes to breadcrumbs navigation. Think first, then make your decision.

SEO and breadcrumbs

I ain’t gonna skip this! You talk of adding text (in any form) to a web page and a webmaster (like me) will start figuring out the keywords that can be used to optimize the same. Well, we are webmasters and we want our websites to be featured at the top page of Google!

Breadcrumbs can be a useful way to leave keywords on a page. This enhances keyword rich internal linking which as a result might help in SERP. Before you go the extra mile and optimize your breadcrumbs with keywords, I want you to go through below points:

  • First think about usability and later on, if possible, use keywords in your breadcrumbs. Never miss out on the main purpose of your breadcrumbs – user satisfaction.
  • Over stuffing of keywords could result into disastrous results. Be warned!

The Showcase

Enough said already! Use breadcrumbs if you feel like and if you require inspirations then we do have few exciting ones following up:

1. Apple

2. Booreiland

3. Bubble Stick

4. Cool Spotters

5. Delicious

6. Devlounge

7. Girls Scouts

8. Lonely Planet

9. Overstock

10. Unique Martique

Salman Siddiqui

Salman Siddiqui is an alpha geek, design guru and seasoned WordPress critic. Writing, for him, started out of ego but it has become the most luring and enlightening career option of his life. He is walking that extra mile for his freelancing dream.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Ben says

    How do you deal with the situation for something like posts in wordpress. If one post belongs to multiple categories, what should the breadcrumb trail be? I’ve used different plugins but they all seem to decide that only on category is correct in the trail. Even if you came to the post by way of the other categories.

    Anyway, is there a way to make the trail reflect the true path from the homepage through? Avoiding the obvious pitfalls you mentioned above about dynamic crumbs?

  2. Morgan says

    breadcrumbs provide ease of use as well as being a time saver, especially when it comes to sites with hundreds of pages. It’s all about the user and sites like Eccommerce ones fair well with breadcrumbs. It should form an integral part of the website’s design and merge in nicely as a visual element rather than stand out looking like some copyright message or instruction that needs to be there.

  3. Stanley says

    Breadcrumb are useful for increase usability of website, Visitor can rich easily to their intended place

  4. says

    It is always a touch one with breadcrumbs, designers hate them and information architects swear by them. It really depends on the complexity of the website. If a user is likely to enter your site via a page that is a couple of levels deep, breadcrumbs can be essential to help that user explore your website further. They can be very helpful at showing the user that the page they are viewing is only a small part of what your site has to offer.

    • Salman says

      So true! Breadcrumbs can be so useful to convey the depth of your website to your visitors.

  5. Manuel Garcia says

    Wow. Speechless. Informations, Compilations, Explanations and everything are all in one place. Good Job!

  6. Eoin says

    As a website designer, I use breadcrumbs on every site possible, and one thing I always try and do is keep them clean and simple. Website breadcrumbs are not supposed to be a major part of any website, but can be used to give a website a little extra kick as a space filler. But always remember, they are there to help the VISITOR, not the website owner.

    Nice article, never thought that much about breadcrumbs, but it just goes to show that even the smallest bits have a big say! :)

    All the best,
    Eoin

    • Salman says

      They surely have. After all, web designing is about bringing together the tit bits and organising them in the best possible order.

  7. Stan says

    I love the imagery of breadcrumbs…. but I prefer the popcorn method as depicted in one of my favorite Little Rascals episodes. Dropping popcorn to lead your way back out of the cave, except another kid follows you in eating the popcorn as he goes. Might be like Google changing the algo and erasing your best breadcrumb path.

    • Salman says

      I don’t agree with that perception. Breadcrumbs are kind-of static when you consider their real definition. And, as I have stated in my article – dynamic breadcrumbs aren’t required. Google deleting your past results is related with IM and SEO. The two of them can be related with Hansel and Gretel model but not with breadcrumbs!