Usable Breadcrumbs with Guidelines

Published: May 12, 2004 in articles » usability by Thomas Baekdal

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.

Two Kinds of Breadcrumbs

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:

Example

Home > Products > Office Lighting > About us > Store Locator

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.

Example:

Home > Products > Office Lighting
Home > About us > Store Locator

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.

Breadcrumb Guidelines

Use horizontal breadcrumbs

Your visitors get confused when you use a vertical breadcrumb which is often mistaken for a sub-navigation.

Keep the contrast

Breadcrumb navigation is an important navigational aid and it must be clearly visible to have any use.

Position it on the top of the page

There are in general three good positions to place breadcrumbs

Above everything on the top of the page (example)
Just below the main navigation bar (example)
Just above the headline of the current page (example)

Include the page title

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)

Do not include "You are Here:"

It only ads to the clutter of your page and breadcrumb navigation will work just fine without.

Always include the full path

Do not use "Office Lights > Spots", but use "Home > Products > Office Lights > Spots"

Do not link the active page

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.

Clearly differentiate links vs. page titles

Make it obvious what part of the breadcrumb is clickable.

Use the same link style as your other navigational elements

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).

Do not include breadcrumbs on you front page

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.

Use Home for Home

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"

Use a forward arrow to indicate the path

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.

Ensure consistency between the page address and the breadcrumb

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

#1
Jun 30
2007

Abu

visit my website

Should the homepage have a breadcrumb?

In favour of yes... it will let users see the trail expand as they click away from the home page.

In favour of no... what's the point of leaving a trail to the homepage when you are on the homepage.

Any other ideas?

#2
Oct 18
2007

jerjer

visit my website

@abu. I'm in favor of yes. to me breadcrumbs are not only a navigational tool. they are also an information tool. a breadcrumb that says "Home" explicitly describes the page that contains it as the home page. to the question, shouldn't the user deduce that from the url, I respond that there are quite a few cases I can think of where a web page contents are displayed sans the url.

#3
Dec 6
2007