Recommended approach for implementing breadcrumbs

11,073

Solution 1

Although they are called "breadcrumbs" as in the fairy tale, the purpose of breadcrumbs is not to replace the browser history. So Option 1 is not an option.

They are rather an instrument to show the user how he found the product and above all how he can find other products that are logically placed "beside" the found product.

So it's basically Option 2.

If you have products that are in multiple categories, you have three options:

  • Show all possible paths to the product.
  • Show the path the user came to the product. (This requires that you use the primary key of your product-to-category table instead of product IDs.) It implies, that the user will get hardly helpful "Search > Product" breadcrumbs when searching.
  • Specify a "main category" for each product that determines the breadcrumbs shown (and is used in other places, for example when there is a shopping cart and the user clicks a product in the cart view.)

Solution 2

Breadcrumbs are supposed to be representative of your site layout, not how the user is accessing your site, which pretty much rules out option #1. I'd not like to see this on Amazon:

Home>Products>Home>PS3 Games>Call of Duty>PS3 Games>Funky Boxer Shorts->Add To Cart

Whilst indicative of my browsing history and random clicking, it's not representative of the site :)

I assume you have a database-backend, as you mention product categories. If you have parent categories then you have a structure right there that you can use. Assuming you have a front page, we can just call that "Home" on the breadcrumb trail. Then, assuming in your database you have things arranged like this:

table_productCategories
    _pkCategoryID
    _categoryName
    _fkParentCategoryID

Allowing you to have a tree of product categories:

Software
    Windows
        Apps
        Games
        Crash-To-Desktop
    Linux
        Servers
        3-Games
Hardware
    Laptops
    PCs
    Missile-Launchers

...then whenever you hit the product page, you don't need to worry about if the product is in more than one category, the user navigated there and using a db query we can build a breadcrumb of:

Home > Software > Windows > Games > Aunt Dolly and the Scared Sheep

Additionally, you're going to have pages that aren't products. "About Us" "Contact Us", etceteras. In a CMS the content of these pages are in the database and categorised too.

table_contentCategories
    _pkCategoryID
    _categoryName
    _fkParentCategoryID

... you get the idea. This means all your pages with Content rather than products can also be breadcrumbed:

Home > About > Finding Us in a web of backstreets
Share:
11,073
vdrmrt
Author by

vdrmrt

Updated on September 17, 2022

Comments

  • vdrmrt
    vdrmrt over 1 year

    I want to implement breadcrumbs on a website, now I'm struggling on how to best implement them.

    Users can search for products but can also navigate to a product category to find a product. On a product page the user can click on a product category to find similar products. So the users has different paths to reach a specific product / page.

    I think I have two options to implement breadcrumbs

    Option 1: Add every visited page to the breadcrumb. For example: Home > Search Results > product 1 > Category 2 > product 2 Disadvantage: breadcrum can become very long

    Option 2: Specify for every page a specific fixed breadcrumb for example: Home > category 1 > product 1 Issue: what to do with products that are in multiple categories?

    What are you opinions? Is there option 3 that I have overlooked?

  • Martin v. Löwis
    Martin v. Löwis over 13 years
    Your first statement is really narrow. Some people use location-based breadcrumbs to indicate your location in a site, but others use path-based breadcrumbs to indicate how a user got to where he is in the site. I would say that the latter is more true to to the "breadcrumb" concept. The content of your site is a big factor in determining which is better.
  • Martin v. Löwis
    Martin v. Löwis over 13 years
    Agreed, perhaps it does come across that way. I was mainly referring to the "Add current page to breadcrumb" suggestion which would produce the output I gave an example of.
  • YogiZoli
    YogiZoli over 13 years
    Ok let's dump option 1 but do you think that it's a good idea to show in the breadcrumb how a user came to the product even if it was trough a search. For exampe: Home>Search Results>product_1, Home>category_1>product_1 or Home>category_2>product_1
  • YogiZoli
    YogiZoli over 13 years
    From the three possibilities I gave, I have no favorite. It depends on the application. Showing how the user came to the product is probably your only option if you don't have "main categories" and you only want one path in the breadcrumbs.
  • Su'
    Su' about 12 years
    Depends who you ask. (They actually list one more model there.) At this point, the term basically just stands for the general "x > y > z" visual widget, with a second decision being made by the implementer as to which actual methodology they're using.