Smashing Magazine - we smash you with the information that will make your life easier. really.

I’ve only ever once had a client who wanted breadcrumbs, but they’re a good think to know about, if someone does want it.
Good post.

great as allways, thanks Smashing!

Really usefull article, thanks.

Guys,

Recently I used breadcrumps below the title of the page ( H1 tag).
This practice is wrong or can be accepted?

@Ethan: I agree with you in that you should justify the need before implementing breadcrumbs. I’m a minimalist, so for me, a site feature must have value for it to be incorporated in the design. Relying on breadcrumbs as a crucial method of navigation rather than an ‘extra’ site feature, usually, is an indication of a poor site design.

@Matt: Wrong in what sense? It’s all about implementation and styling: structurally, it’s valid.

One thing to keep in mind is that it would be annoying for people who use screen readers. After they encounter the page title, they will always encounter your breadcrumb right after – when they’re expecting either meta data (like date of publication, author, etc.) or the content of the page – there are ways that they can skip it – but they’ll have to be familiar with your site’s structure first. Can we see a live demo?

@Jane: Breadcrumbs are very helpful, but it shouldn’t be something to be relied upon. For example, Newegg’s attribute-based breadcrumbs can really help you find hardware that you’re specifically looking for. I think that it’s all about implementation, needs-analysis, and what your users want/need. Harping back on Newegg, their userbase is generally: tech-savvy, power user, computer enthusiast – so a robust navigation scheme with plenty of options is something that their users would appreciate.

Great article and examples. One that I would have included as well would have been http://www.whitehouse.gov/

They have a breadcrumb at the top of pages that is not clickable, just there to show you where you are at – but they also have another (functional) one at the bottom of the page, before the footer. I like the placement of this second one because it offers a way for users (who actually read the entire page) to navigate back up a level without having to use the footer’s nav , scroll back up to the top navigation or use the back button.

Very good

Great article. Would love to have you re-visit our site in about 2 weeks – we are in the middle of a re-design and one of the most important fixes is the Nav structure (including breadcrumbs).

Regards,
Frank
CEO, MeFeedia.com

thanx.. thats a very rich article.. keep it up.

Thanks for the article that I just happened to fall upon. I thought I knew most of this but really enjoyed seeing your review of newer uses. The comments are provocative too to think of seo and actual user benefits. I use, especially in large sites, them but perhaps that’s because I am familiar with them.

For one of our new websites, I combined a breadcrumb with a navigation list that looks like a tree-view (great for hierarchy).
You can see an example on this page (tree-view on the left).

Thanks very good and informative. I always wanted to know that how that term comes “Breadcrumb” now i got it. :)

I miss the best best practices to built such breadcrumb navigations. What I had expected is the recommendation to use list tags or put every think in structured div container?

Like it! Keep it up!

Very informative article…

Very usefull article! Thank you.

According to some, breadcrumbs are a design cop-out for properly implemented easy to use site navigation. Jared Spool is the author of that article, and it caused a bit of a debate – which prompted a follow up.

I would tend to agree with his opinion. Breadcrumbs are unnecessary if navigation is intuitive.

This is the best article I have seen on breadcrumb navigation. You cover why it is important, how to do it well, who’s not doing it so well. Great article. It’s information I will put into effect immediately and with all of our clients.

Interesting bit about the breadcrumbs with flyout option – we recently explored “super breadcrumbs” like that for a site we’re building, but ultimately scrapped it as we did not feel the hybridization provided anything revolutionary; it simply made the user think.

Breadcrumbs are such a good navigational utility. Some classic examples and nice to see some creativity with something that is usaully dull and often overlooked in design.

Great Article, one for the favourites folder…

Good Article as always. It would be great if we could have a follow up article on implementation methods for Breadcrumb.

Since I added breadcrumb navigation to my layouts, I’ve never looked back ever since – they help my visitors find their way around the website. However, I’ve read debates regarding using unordered lists (and then floating the <li> tags later) over using <span> instead. Some people claim that it’s a violation of web semantics to use unordered list because each subsequent item is actually a ‘child’ of the previous one. Personally I have no qualms using unordered list for breadcrumbs, but since you’ve did an excellent writeup on this, what are you views?

Teddy: Sorry, i didnt read your post!! I think that the nested ul approach makes sense as, as you say, each item is a child of the previous one.

Great synopsis! The examples of when to implement them are a great resource to have to show clients when trying to persuade them either way. I agree with many other comments here, it would be great to have a best practices for breadcrumbs follow up article to this one. I would think ul and li tags would be best, but I have read many contradicting things on what are the best tags to use.

Very good!

Example #4 is really more of a progress meter than a breadcrumb in my opinion. I feel they are different because a breadcrumb is use primarily as a navigation tool while a progress meter is specific letting the user know where they are in a specific process. Progress meters are geared more toward multi-step processes as mentioned (such as a wizard) which is quite different than the intentions surrounding a breadcrumb.

Great article as usual though!

Great article. I still can’t seem to fully understand this concept of “filtering out” using checkmarks or X’s.

I thought that the idea of breadcrumbs was to indicate where you were in a hierarchy. And so I suspect it might be confusing to most people to have an option to filter out an entire level of site structure. And the two examples listed above aren’t the clearest (ex: overstock, when you filter out “beds” you still see a list of twin beds)

anyone have any good examples of this in practice?

cheers!

Another great article. Very useful, thanks a lot!

Breadcrumbs are great for user’s navigation, like bookmarks in a book. After reading this article they also provide a design challenge for the designer – I tend to stick to the normal style but will now aim to try different solutions in the future.

Many usability studies show that some users benefit from breadcrumbs usability studies show that some users benefit from breadcrumbs. Just as important, user research also finds that no users suffer problems because of breadcrumbs. (Some users do ignore the breadcrumbs, but they certainly don’t use them wrong.)

The cost-benefit analysis for breadcrumbs is easy:

Decent (not big) benefits to some users
No downsides to other users
Low overhead in the UI, fast download times

@Craig: check out Jakob Nielsen’s Breadcrumb Navigation Increasingly Useful a little old (about two years ago), but it outlines the value of breadcrumbs.

@Matt: The prototype looks great to me. An additional value of that would be in SEO where the first thing spiders see is, in terms of unique content (not including primary nav and logo, etc.) is:
1. Page title
2. link to level 1 category
3. link to level 2 category
4. location
5. h2

If you name your categories well, you could potentially improve your site’s indexibility with a structure like that.

@Patrick: semantically/structurally, nested unordered lists would be the way that would represent the hierarchical relationship of the links. But taking this theory to practice in this manner would be, quite simply, unnecessary work. One other solution that would somewhat represent the hierarchy of the links is via ordered lists.
1. item 1 – First-level category
2. item 2 – Second-level category
3. item 3 – Third-level category

Hey, I’m all for semantics and structural accuracy, I’ve written about it in the past: Structural Naming Convention in CSS but I’m also a realist and a pragmatist – in that, in real-world scenarios, it just doesn’t matter: there are real deadlines to be met, and maintainability to consider. I think a single-level unordered list is a good compromise in terms of structure vs. pragmatism. You said it yourself: nested list, thought structurally-accurate and representative of the links’ relationship, is fairly messy. Now multiply that messiness to 50-60 categories in 3 or 4 levels, and you’re looking at a large-scale site’s nasty markup… for breadcrumbs? I pity the developer that gets the task of tacking on another site level or taking one away when the site decides to scale or restructure content.

My two cents.

@teddY: Read the above reply to @Patrick, that’s my view on unordered list. I’ve had debates on things like this, like: whether I should use <strong>text:</strong> or <strong>text </strong> :, in the end – the pragmatist and “Getting Real” in me just says, “it just doesn’t matter”

@Subbu: and @PureDezigner:I’m thinking about it: a more pragmatic, less theoretical approach to discussing breadcrumbs. How to do it, instead of why/why not.

@Rob Cottingham: I checked it just now, looks great, very similar to Apple’s breadcrumbs, visually.

@Virtualsalvation: You do not know how long it took me to decide whether to leave that example on or take it out, exactly because of your sentiments. I could have found a better example to use than the web form sign-up process. I do think breadcrumbs and that example accomplishes two things: it lets you know where you are, it lets you go back and forth from where you’ve been.

@davelane: the best example I can think of at this moment is Newegg, check out this page. If you use the (x) on any attribute on the breadcrumb, you are presented with a new page that doesn’t have that attribute.

Let me know if that makes it clearer, or if I should explain further.

@Nicolas: Not the best term, I agree, but it’s stuck to that.

thanks.

Breadcrumbs are a navigational cop out. The effort spent designing and implementing breadcrumbs should rather be spent implementing Intuitive navigation, negating the need for them.

Useful post

Good Article, it is so nice

Breadcrumbs can be very useful if they’re used right.

@A West:
There are all kinds of scripts. I usually use JavaScript to auto create my breadcrumbs. I think you’d be crazy to go into every html file and put the breadcrumbs in by hand, especially on a large project.

I have this breadcrumb class but I am having difficuty implementing it. Is anyone able to help?

crumbs = $_SESSION['breadcrumb'];
}

}

/*
* Add a crumb to the trail:
* @param $label – The string to display
* @param $url – The url underlying the label
* @param $level – The level of this link.
*
*/
function add($label, $url, $level){

$crumb = array();
$crumb['label'] = $label;
$crumb['url'] = $url;

if ($crumb['label'] != null && $crumb['url'] != null && isset($level)){

while(count($this->crumbs) > $level){

array_pop($this->crumbs); //prune until we reach the $level we’ve allocated to this page

}

if (!isset($this->crumbs[0]) && $level > 0){ //If there’s no session data yet, assume a homepage link

$this->crumbs[0]['url'] = “/index.php”;
$this->crumbs[0]['label'] = “Home”;

}

$this->crumbs[$level] = $crumb;

}

$_SESSION['breadcrumb'] = $this->crumbs; //Persist the data
$this->crumbs[$level]['url'] = null; //Ditch the underlying url for the current page.
}

/*
* Output a semantic list of links. See above for sample CSS. Modify this to suit your design.
*/
function output(){

echo “Click trail: “;

foreach ($this->crumbs as $crumb){

if ($crumb['url'] != null){

echo ” > “.$crumb['label'].” “;

} else {

echo ” > “.$crumb['label'].” “;

}
}

echo “”;
}
}
?>

I take I need to use sessions?

Very useful post, I shall be doing something creative with my breadcrumbs I think… maybe make a Apple Crumble? Mhhhmmmm