Breadcrumbs are becoming a standard way of telling the visitor where they are when navigating a site. For me it is one of the key "must have" elements in order to make a website usable.
There are in general two kinds of breadcrumbs - one that is correct in theory and one in practice.
The theoretically correct version shows where you have been - the path you have taken trough the site:
You visited the products sections - looked at some office lighting. Then you moved on to About us to find a store near your location.
The practical breadcrumb - the one I recommend - instead it shows "where you are" - the path from the front page to your current location.
Practical breadcrumbs have the advantage that it gives your visitor a better sense of your site as a whole. It enables you to quickly be able to browse to similar areas of interest.
Your visitors get confused when you use a vertical breadcrumb which is often mistaken for a sub-navigation.
Breadcrumb navigation is an important navigational aid and it must be clearly visible to have any use.
There are in general three good positions to place breadcrumbs
If you position the breadcrumb using either method 1 or 2 (read above) you should include the page title. If you use the third way you should omit it because the title is displayed directly below it (like on this page)
It only ads to the clutter of your page and breadcrumb navigation will work just fine without.
If you are standing on "Home > Products > Office Lights", only link the preceding sections. Linking to the same page is called self-links and is generally confusing because you are going in a loop when you click on it.
Make it obvious what part of the breadcrumb is clickable.
Breadcrumbs are a navigational tool and so you should style it the same way as you style other navigational elements. This will increase consistency and maker it more obvious what it is. On this site I have one style for navigational elements (dark-orange, no underline) vs. content links (blue, no underline).
Front page breadcrumbs are often a mistake because it only contains "Home" - it is not even linked. Your visitors will most likely be confused about this single word, and not get the idea before they visit a sub page.
For international English sites use the word "Home" as the link text to the front page. Exceptions: When making localized sites "Home" needs to be translated - e.g. in Denmark it would be "Forside". Also when making non-international sites for visitors in UK; "Home" can be replaced with the UK-English variation "Frontpage"
This could be ">" or a similar symbol or graphics. Do not use vertical symbols ":","|" or similar vertical separators as they indicate alternatives. I would also stay away from "/" or "" because it makes the breadcrumb look like program language.
Make sure that you sites structure is similar to your breadcrumb. E.g. Do not make the address of your page "www.company.com/press/new/spots" with a breadcrumb showing "Home > Products > Office Lights > Spots".
Recently there was a good discussion at Simplebits on how to code breadcrumbs
Full access for... $9 per month
Full access for... $99 per year
Join 'The Weekly Update' to get an email every Friday afternoon with the latest from Baekdal + noteworthy articles from around the web.
What the shift in media is really all about.
Free for subscribers
$8.79 on Amazon
It is not about creating a shop in a tab. It is about turning communication into sale.
Free for subscribers
$7.58 on Amazon