Smashing Magazine - we smash you with the information that will make your life easier. really.
Jacob Gube is a bilingual web developer (JavaScript and PHP), web designer, author, and the Founder/Chief Editor of Six Revisions: an online publication that shares useful development and design resources and tutorials for web professionals.
- 76 Comments
- 1
- 2
March 17th, 2009 1:07 pmThank you for publishing this article! I found it interesting how creative folks are getting with them.
Of course designers should champion the importance of breadcrumbs in their designs. What I’d always stress to my clients though is that a breadcrumb does NOT replace a pagetitle.
Just because they are helpful, doesn’t mean they solve every problem. (They are no Windex, you know).
- 3
March 17th, 2009 1:07 pmgreat as allways, thanks Smashing!
- 4
March 17th, 2009 1:08 pmI’ve started a lot of arguments over these. Breadcrumbs can often elicit as many if not more questions than they answer. Are these supposed to be where I am? Or how I got here? Glad to see this at least acknowledged here.
I find a lot of user bases have real trouble defining whether breadcrumbs are location, path or attribute based.
If you can justify them based on depth of content and audience need, then by all means. There’s a lot of over-reliance on these IMHO. Reserve them for sites where you have to assume your users will get lost – but don’t use it as an excuse for poor IA.
- 5
March 17th, 2009 1:34 pmReally usefull article, thanks.
- 6
March 17th, 2009 1:35 pmAnd I thought breadcrump is dead.
Surprise. Surprise. - 7
March 17th, 2009 2:11 pmGuys,
Recently I used breadcrumps below the title of the page ( H1 tag).
This practice is wrong or can be accepted? - 8
March 17th, 2009 2:38 pmHi – i’m a usability professional by training. In many many studies involving hundreds and hundreds of users we have hardly ever seen people using breadcrumbs on top ecommerce sites. Personally i think they are overhyped a bit. they are a must have for SEO (like sitemaps). curious if the usability pros here have DATA (not opinion) about what they’ve commonly observed in the lab and so on? please share your data.
- 9
March 17th, 2009 3:16 pm@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.
- 10
March 17th, 2009 3:47 pmYup, Breadcrumbs are really usefull.
All I know is, they help spider read the structure easily ! :DAny good Wordpress Plugins for the Breadcrumbs ? The One I used didn’t work at all .. :(
- 11
March 17th, 2009 4:11 pmGreat 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.
- 12
March 17th, 2009 4:12 pmNice article. Go SM!
- 13
- 14
March 17th, 2009 6:56 pm@Enk.:
Breadcrumb NavXT is a very complete and stable WordPress breadcrumb trail generation plugin. There are others, but few work for all page types, or are as customizable. Sure, I’m a bit partial to it as I am the developer :). If you can’t get it to work just bug me on the linked page and I’ll help you get it working.
- 15
March 17th, 2009 8:34 pmGreat 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 - 16
March 17th, 2009 8:50 pmI hate breadcrums that are using a slash as separator. It’s so command-line style…
Plus, you have to be certain that no category will ever use a slash.
For instance :
Electronics / TVs / LCD/Plasma Screens
can lead to confusion - 17
March 17th, 2009 9:22 pmthanx.. thats a very rich article.. keep it up.
- 18
March 17th, 2009 9:24 pmnice article
- 19
March 17th, 2009 9:27 pmThanks 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.
- 20
March 17th, 2009 9:45 pmThanks!
- 21
March 17th, 2009 10:22 pmFor 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). - 22
March 17th, 2009 11:05 pm@ Matt: It can be accepted depending on the design…
but I’ve normally noticed it above the page title..
- 23
March 17th, 2009 11:33 pmThanks very good and informative. I always wanted to know that how that term comes “Breadcrumb” now i got it. :)
- 24
March 17th, 2009 11:37 pmI usually make it on a classic way, this article is giving me some ideas for desgning it in the future. Thanx a lot.
- 25
March 18th, 2009 12:25 amI 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?
- 26
March 18th, 2009 12:35 amBreadcrumbs are very useful for the user in large websites / portals.
I used them a couple of time in the past.
I think they could be considered also as a nice graphic element to place in pages, with creativity. - 27
March 18th, 2009 1:16 amLike it! Keep it up!
- 28
March 18th, 2009 1:20 amWhy are they called Breadcrumbs? this is something that is nicely done on the apple.com web site. I have not yet used ‘breadcrumbs’ on any of my sites yet, mainly because i have not build large enough sites that need it, and also, i have not the foggiest idea how to implement one.
- 29
March 18th, 2009 1:27 amVery informative article…
- 30
March 18th, 2009 1:39 amIt would have been nice to talk a bit about the implementation of breadcrumbs in the different platforms (like html, dreamweaver extensions, typo3, wordpress etc.)
But anyway great!!
Thanks
- 31
March 18th, 2009 2:06 amVery usefull article! Thank you.
- 32
March 18th, 2009 2:40 amsoon search engines will consider this seo spam…
- 33
March 18th, 2009 2:57 amAccording 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.
- 34
March 18th, 2009 3:28 am@x-ray: Unordered list (
ul) would be a good option for breadcrumb trails. You can float each list item (li) and then even play around with thelist-styleCSS attribute for separating the links.@James Mann: They’re called breadcrumbs because of the Hansel and Gretel fairy tale that was discussed in the What is a breadcrumb? section.
@ush: Actually, you’re right – I should’ve talked a little bit about a “how-to” implementation and then discuss practical implementation using HTML/CSS and then go to talk about your options for popular CMS’s. I will keep that in mind in future articles.
- 35
March 18th, 2009 3:41 amThis 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.
- 36
March 18th, 2009 3:55 amThanks for the great article. I guess breadcrumbs aren’t used as much anymore, but they still provide an effective and simple solution when appropriate.
- 37
March 18th, 2009 4:16 amInteresting 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.
- 38
March 18th, 2009 4:38 am@Jacob Gube and @Nidhi
Thanks a lot for the info. :)Here is a little screenshot of the page:
http://dl.getdropbox.com/u/568311/samples/bread.jpgThis is a Magento ecommerce template i’ve working about.
- 39
March 18th, 2009 4:59 amBreadcrumbs 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…
- 40
March 18th, 2009 4:59 amI’m not convinced that using an unordered list is the best procedure for breadcrumbs. A breadcrumb trail is essentially hierarchical (in most cases) and ul is not. Semantically, wouldn’t you want nested lists? But that would make fairly messy markup.
- 41
March 18th, 2009 6:00 amGood Article as always. It would be great if we could have a follow up article on implementation methods for Breadcrumb.
- 42
March 18th, 2009 6:03 amI hate breadcrumbs that display the current page as well. Then you have the title in two places right next to each other. In breadcrumbs for NBA Gauntlet, I removed the current page from displaying in the breadcrumbs.
- 43
March 18th, 2009 6:27 amSince 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?
- 44
March 18th, 2009 6:49 amGood article, and nice to see one of our sites used for an example (techradar). This is all good on a visual level but im very interested in how breadcrumbs should be implemented from a coding perspective! There are many different ways of writing breadcrumbs, some better than others, from both a usability perspective and also from an SEO perspective. Perhaps this is out of scope for this article.
These days we tend to use nested unordered lists as it seemed the most sensible and semantic way of doing it.
- 45
March 18th, 2009 7:06 amTeddy: 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.
- 46
March 18th, 2009 7:30 amNifty – especially the more experimental uses. That’ll take some cogitating.
Did you happen to see Veerle Pieters’ blog post about scalable CSS-based breadcrumbs? (Disclosure: she invented them for our site relaunch.)
- 47
March 18th, 2009 7:35 amGreat 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.
- 48
March 18th, 2009 7:35 amGreat!!!
- 49
March 18th, 2009 9:17 amVery good!
- 50
March 18th, 2009 9:51 amThis is a very nice article…
- 51
March 18th, 2009 11:46 amExample #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!
- 52
March 18th, 2009 4:56 pmGreat resource. I haven’t implemented breadcrumbs much on my websites, but I am now thinking about doing so.
- 53
March 18th, 2009 5:21 pmGreat 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!
- 54
March 18th, 2009 9:34 pmThank you!!
- 55
March 19th, 2009 12:50 amAnother great article. Very useful, thanks a lot!
- 56
March 19th, 2009 1:13 amHi,
Is breadcrumb term the best word to qualify user’s location?
Breadcrumb’s term speaks about historic of user’s navigation, don’t it? - 57
March 19th, 2009 5:50 amBreadcrumbs 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.
- 58
March 19th, 2009 8:50 amGood article, I find breadcrumbs a great tool when designing and navigating sites, especially if there are more than two tiers of navigation. More designers should use them.
- 59
March 19th, 2009 10:00 amMany 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 - 60
March 19th, 2009 10:08 amCome to think of it, how about applying breadcrumbs to browsers? No in the usual way like locationbar2 for Firefox does (awesome plugin btw), like with http://www.site.com » folder » second » file.html or something, but more like the sequence of pages you visit, and the way you follow links. Like Google » Search “hotels” » SuppahHotel.com » Rent a Room » Check Room 202 out
Huh? Wouldn’t that be awesome?!
God, I sometimes have awesome ideas. Feel free to use them, I don’t care. :D
- 61
March 19th, 2009 10:36 am@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. h2If 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 categoryHey, 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.
- 62
March 19th, 2009 2:56 pmExcellent article thank you. We’ve used breadcrumbs on our sites but only where we and the client felt it was necessary, and I absolutely believe they’re expected on a large tiered site. I’ll be bookmarking this as reference. Thanks again and I look forward to reading the post about implementation.
Cheers. - 63
March 19th, 2009 3:53 pmthanks.
- 64
March 19th, 2009 5:01 pm写得非常好,学习了
- 65
March 20th, 2009 2:04 amBreadcrumbs are a navigational cop out. The effort spent designing and implementing breadcrumbs should rather be spent implementing Intuitive navigation, negating the need for them.
- 66
March 20th, 2009 6:58 amBreadcrumbs have been getting more and more attention lately.
- 67
March 20th, 2009 6:58 amUseful post
- 68
March 20th, 2009 7:33 amThanks you for this article. Good to keep this in mind while I am designing my e-commerce site!
- 69
March 22nd, 2009 2:28 pmGood Article, it is so nice
- 70
March 24th, 2009 12:55 pmI’d like to use breadcrumbs but have an overwhelmed web team. Is there a plugin or script that will auto-create these?
- 71
April 11th, 2009 4:50 pmBreadcrumbs 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. - 72
May 23rd, 2009 2:43 amThis is a fantastic article, If you read Google’s guidelines for SEO & best practices they also say that Breadcrumbs really helps them understand the structure of a site. They’re also pretty good for SEO if you include keyword rich Anchor Text.
- 73
July 28th, 2009 8:14 pmI 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?
- 74
September 8th, 2009 8:11 amA slightly different use of breadcrumbs:
After clicking on a specific search result, AppExplorer uses breadcrumbs to allow the user to navigate to other search results without going back to the results page.
- 75
November 21st, 2009 5:23 amVery useful post, I shall be doing something creative with my breadcrumbs I think… maybe make a Apple Crumble? Mhhhmmmm
- 76
January 12th, 2010 8:55 pmGot damn inspiring so, I thought that my idea can be cool, even if someone has it:
In a blog, wordpress for examle, a breadcrumb that beign pocisionated in the category link, displays a dropdown menu with al the subcategories, or when click, displays all the subcats, if not, just go to the parent category.
Excelent post guys ;) I like the apple nav
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
- How to Test your JavaScript Code with QUnit - http://bit.ly/da853c
- jQuery 1.4 API Cheat Sheet - http://bit.ly/5zYYnE
- Beautiful, Elegant and Free 48px Icon Set - http://bit.ly/cSWcBR










































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.