Breadcrumbs In Web Design: Examples And Best Practices

Advertisement

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability1 of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

What is a breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel2 fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

interactive example 1.763
Breadcrumbs on Delicious.com4

You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails to your own website.

When Should You Use Breadcrumbs?

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map5 or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Types of Breadcrumbs

There are three main types of breadcrumbs6.

Location-based
Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). In the example below (from SitePoint7), each text link is for a page that is one level higher than the one on its right.

Example of location-based breadcrumb.

Attribute-based
Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg8, breadcrumb trails show the attributes of the items displayed on a particular page:

Example of attribute-based breadcrumbs.

This page displays all computer cases that have the attributes of being manufactured by Lian Li and having a MicroATX Mini Tower form factor.

Path-based
Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users
Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages
Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space
Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates
Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate9.

Mistakes in Breadcrumb Trail Implementation

Using breadcrumb trails is a fairly straightforward affair, and there are only a few guidelines to consider before deciding to implement them on a website. Let’s take a look at some common mistakes to avoid.

Using breadcrumbs when you don’t need to
A common mistake in implementing breadcrumbs is using them when there is no benefit.

Using breadcrumbs when you do not need it.

In the above example, Slicethepie10 risks overwhelming users with too many navigation options. The (1) primary navigation, (2) breadcrumb trail and (3) secondary navigation are very close together. The breadcrumb trail in this application offers users no added convenience because the secondary navigation for lower-level pages sits right below it. Additionally, clicking on the second-level link in the breadcrumb trail (“Music”) takes you back to the first tab (“Listen”), which mistakenly suggests that the first tab is on a higher level than the other two (“Search” and “Artist hall of fame”).

Using breadcrumb trails as primary navigation
As stated earlier, use breadcrumbs as an optional aid to navigation.

Using breadcrumbs as primary navigation./

In the above example, mefeedia11 does not offer a primary navigation menu for viewing videos. Though there is text link navigation in the footer section, there’s no navigation menu in the body of the pages, making it hard to navigate to other sections of the website.

Using breadcrumbs trails as primary navigation - example 2.

If you arrive on a video page directly — say, for example, through a Google search result — the only navigation option you may have is the breadcrumb trail. Or if you’ve already been browsing a website’s pages and reach a page that does not display the primary navigation menu, you will have to hit the “Back” button in your browser to access the main menu.

Using breadcrumbs when pages have multiple categories
Breadcrumb trails have a linear structure, so using them will be difficult if your pages can’t be classified into neat categories. Deciding whether to use breadcrumbs largely depends on how you’ve designed your website hierarchy. When a lower-level page is (or can be put) in more than one parent category, breadcrumb trails are ineffective, inaccurate and confusing to the user.

Breadcrumb Navigation Design Considerations

When designing a breadcrumb navigation scheme, keep several things in mind. Let’s take a look at some questions that might arise when you’re working with breadcrumbs.

What should be used to separate link items?
The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.

Example of greater than symbols separating the text links.12

Other symbols used are arrows pointing to the right, right angle quotation marks (») and slashes (/).

Example of alternative hierarchy separators.13

The choice depends on the aesthetics of the website and the type of breadcrumb used. For example, for path-based breadcrumbs in which the links do not necessarily have a hierarchical relationship to each other, using a “greater than” symbol may not convey their relationship accurately.

How big should it be?
You don’t want your breadcrumbs to dominate the page. A breadcrumb trail functions merely as an aid to users (a convenience); its size should convey this to users and thus should at least be smaller, or less prominent, than the primary navigation menu.

An example of a good-sized breadcrumb trail.

A good rule of thumb to follow when sizing your breadcrumb trail is that it shouldn’t be the first item that grabs the user’s attention when arriving on a page.

Where should breadcrumbs be located?
Breadcrumb trails are usually displayed in the top half of the page, below the primary navigation menu if a horizontal menu layout is used.

Breadcrumb Showcase

Now that we’ve discussed the who, what, when, where, why and hows of breadcrumb trails, we should take a look at some live examples. In the following section, you’ll find a few examples of great websites that use breadcrumb trails.

1. Classic Text-Based Breadcrumbs

TypePad Design Assistant14

classic breadcrumb - example 1.15

NASA16

Classic text-based breadcrumbs17

Nestle18 uses a breadcrumb trail whose text is significantly smaller than the text on the rest of the page, effectively making it unobtrusive.

Nestle example.19

Marchand de Trucs20

classic breadcrumb - example 2.21

Bridge 5522

classic breadcrumb - example 3.23

Overstock.com24 uses the standard “greater than” symbol for its attribute-based breadcrumb trail. Checkboxes for product attributes are used so that users can uncheck them to filter them out.

classic breadcrumb - example 4.25

2. Replacing “>” with Other Symbols

TechRadar UK26 and BP27 use right-pointing triangles.

Using other symbols for hierachy separators - example 2.28

Replacing the greater than symbol example.29

PSDTUTS30 and Martique31 use slashes.

Using other symbols for hierachy separators - example 3.32

Using other symbols for hierachy separators - example 4.33

Mouse to Minx34 uses a right-angled quotation mark to denote page hierarchy.

Using other symbols for hierachy separators - example 5.35

Jakob Nielsen’s Alertbox36 uses right-pointing arrows.

Using other symbols for hierachy separators - example 1.37

Target38 uses semi-colons (:) for separators.

semicolon separator example.39

3. Beyond Simple Text Links

One current trend in breadcrumb design basically says, “Breadcrumbs don’t have to be simple”. In these designs, you’ll see beautifully styled breadcrumbs that integrate well with the overall design.

Grooveshark40

styled breadcrumbs - example 1.41

Yahoo! TV42

Beautiful breadcrumb trails.43

IDEO44

styled breadcrumbs - example 2.45

Apple Store46

styled breadcrumbs - example 3.47

Coolspotters48

styled breadcrumbs - example 4.49

Devlounge50

styled breadcrumbs - example 5.51

LottaNZB52

53

Pixelpoodle54

Beautifully-styled breadcrumbs - example.55

guardian.co.uk56

Beautiful navigation - examples.57

4. Breadcrumbs for Multi-Step Processes

Statement Tracker58 uses a breadcrumb trail to indicate the steps involved in registering for an account, as well as a progress indicator.

Sequential process example.59

Flickr60 uses a breadcrumb trail to indicate the number of sections in the Flickr tour.

breadcrumb61

5. Breadcrumbs with Sub-Navigation

Here are some examples of breadcrumb trails whose links, when clicked on or hovered over, open a sub-navigation panel that lists additional attributes or locations.

MarketWatch62 has a fly-out sub-navigation menu that appears when you hover over a breadcrumb link.

breadcrumb with sub-navigation example.63

Profoto64 has a unique breadcrumb trail: clicking on a breadcrumb link opens an area below it that gives users additional attributes to select from.

Experimental Example 2.65

Cranfield University66 has a similar fly-out breadcrumb scheme, which serves a dual function: as an location indicator for the user and as a robust and interactive secondary navigation scheme.

Flyout Breadcrumbs67

Lonely Planet68 also has a fly-out breadcrumb trail in which you can change attributes.

flyout menu - example 3.69

Clicking on a breadcrumb link takes you to that item’s page, while clicking on the downward-pointing arrow opens additional options.

Flyout menu - example 4.70

MSDN71 has a breadcrumb trail that opens a scrollable sub-navigation list when the user hovers over a link.

subnavigation example 1.72

Wowhead73 has a multi-level sub-navigation scheme.

74

6. Interactive Breadcrumbs

Delicious75 lets you remove items in the breadcrumb trail of keyword tags to help you quickly find bookmarks.

interactive example 1.763

7. Experimental Examples

Booreiland77 uses a breadcrumb-style navigation scheme for its primary menu, allowing visitors to quickly understand what they’re currently viewing.

Experimental example 1.78

User interface designer Aen Tan of AEN UI79 talks about a design pattern called “Tabcrumbs80,” a navigation scheme that combines tabs81 and breadcrumbs.

Tabcrumbs example.82

(al)

↑ Back to topShare on Twitter

Jacob Gube is the Founder and Chief Editor of Six Revisions, a web publication for web developers and designers, and the Deputy Editor of Design Instruct, a web magazine for designers and digital artists. He has over seven years of experience as professional web developer and web designer and has written a book on JavaScript.

  1. 1

    Guys,

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

    3
  2. 2

    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.

    2
    • 3

      It’s not a question of whether the client WANTS breadcrumbs. It’s an issue of Best Practices. Where appropriate, breadcrumbs make a site more intuitive/user friendly for little additional cost/effort.

      23
  3. 4

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

    4
  4. 5

    great as allways, thanks Smashing!

    0
  5. 6

    I’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
  6. 7

    Really usefull article, thanks.

    1
  7. 8

    Simon Harlinghausen

    March 17, 2009 1:35 pm

    And I thought breadcrump is dead.
    Surprise. Surprise.

    0
  8. 9

    Hi – 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.

    2
  9. 10

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

    5
  10. 11

    Yup, Breadcrumbs are really usefull.
    All I know is, they help spider read the structure easily ! :D

    Any good WordPress Plugins for the Breadcrumbs ? The One I used didn’t work at all .. :(

    -5
  11. 12

    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.

    0
  12. 13

    Nice article. Go SM!

    0
  13. 14

    Very good

    0
  14. 15

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

    -2
  15. 16

    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

    -5
  16. 17

    I 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

    7
  17. 18

    Abdulsalam Alasaadi

    March 17, 2009 9:22 pm

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

    -6
  18. 19

    nice article

    -4
  19. 20

    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.

    -3
  20. 21

    Thanks!

    -2
  21. 22

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

    -2
  22. 23

    @ Matt: It can be accepted depending on the design…

    but I’ve normally noticed it above the page title..

    -1
  23. 24

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

    -1
  24. 25

    I usually make it on a classic way, this article is giving me some ideas for desgning it in the future. Thanx a lot.

    -1
  25. 26

    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?

    -1
  26. 27

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

    -3
  27. 28

    Like it! Keep it up!

    -2
  28. 29

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

    -2
  29. 30

    Very informative article…

    -2
  30. 31

    It 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

    -2
  31. 32

    Very usefull article! Thank you.

    -2
  32. 33

    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.

    0
  33. 34

    @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 the list-style CSS 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.

    0
  34. 35

    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.

    0
  35. 36

    Thanks for the great article. I guess breadcrumbs aren’t used as much anymore, but they still provide an effective and simple solution when appropriate.

    -1
  36. 37

    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.

    -1
  37. 38

    @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.jpg

    This is a Magento ecommerce template i’ve working about.

    -1
  38. 39

    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…

    -1
  39. 40

    I’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.

    -1
  40. 41

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

    -1
  41. 42

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

    -1
  42. 43

    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?

    -1
  43. 44

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

    0
  44. 45

    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.

    -1
  45. 46

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

    -2
  46. 47

    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.

    1
  47. 48

    Great!!!

    -1
  48. 49

    Very good!

    -1
  49. 50

    This is a very nice article…

    0
  50. 51

    Virtualsalvation

    March 18, 2009 11:46 am

    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!

    -1
  51. 52

    Ottawa Web Designers

    March 18, 2009 4:56 pm

    Great resource. I haven’t implemented breadcrumbs much on my websites, but I am now thinking about doing so.

    -1
  52. 53

    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!

    0
  53. 54

    Mithun Sreedharan

    March 18, 2009 9:34 pm

    Thank you!!

    -1
  54. 55

    Another great article. Very useful, thanks a lot!

    -1
  55. 56

    Hi,
    Is breadcrumb term the best word to qualify user’s location?
    Breadcrumb’s term speaks about historic of user’s navigation, don’t it?

    0
  56. 57

    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.

    0
  57. 58

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

    0
  58. 59

    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

    1
  59. 60

    Come 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

    0
  60. 61

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

    0
  61. 62

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

    0
  62. 63

    thanks.

    0
  63. 64

    写得非常好,学习了

    0
  64. 65

    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.

    -1
  65. 66

    Cristhian Bedon

    March 20, 2009 6:58 am

    Breadcrumbs have been getting more and more attention lately.

    1
  66. 67

    Useful post

    1
  67. 68

    Thanks you for this article. Good to keep this in mind while I am designing my e-commerce site!

    0
  68. 69

    Good Article, it is so nice

    0
  69. 70

    I’d like to use breadcrumbs but have an overwhelmed web team. Is there a plugin or script that will auto-create these?

    0
  70. 71

    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.

    0
    • 72

      hello i was wondering if someone could provide some helpful links to some tutorials; i am a total newb, and im trying to teach myself web design. i understand now the importance of this and see many examples, however i wouldnt know where to start to add a breadcrumb style navigation to my website. thank you for your time.

      0
  71. 73

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

    0
  72. 74

    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?

    -1
  73. 75

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

    0
  74. 76

    Shane Hudson - Be Motivational

    November 21, 2009 5:23 am

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

    0
  75. 77

    Got 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

    0
  76. 78

    Information in this article is very good.
    I have one doubt about its coding. Whether breadcrumbs will be done as static tags in every html pages or is there any other good design is there in server side. Sine in our site site tree is large and we cant do it as static in all html pages. In this scenario how is it better to design it?

    0
  77. 79

    Jean-Francois Monfette

    April 21, 2010 10:31 am

    Great article ! I was looking at the breadcrumbs sections in the Smashing Book and wanted to learn more about the best practices. This article is going into my favorites for sure.

    0
  78. 80

    Jessica McKelden Cave

    April 26, 2010 9:45 am

    Excellent article! I think breadcrumbs tend to be a small thing that is often overlooked. Thanks again for the inspiration!

    0
  79. 81

    Super ! i am a newbie to this subject and the examples helped
    me a lot ! Thnks !

    0
  80. 82

    I noticed that Apple.com places their breadcrumbs at the bottom of a page, just above the contextual footer panel. But they place it on the top half in their Store section. Can someone justify having a breadcrumb in the footer area? I can see 1 value in which the breadcrumbs become a secondary navigation at the bottom of a long web page. But other than that, this seems to be an odd place for a breadcrumb trail?

    0
  81. 83

    I’m looking for info / comparison of Hierarchy-based vs. History-based breadcrumbs. It seems logical to me that users might benefit from history-based breadcrumbs but I’m finding no evidence of that. In fact, all evidence points to hierarchy-based breadcrumbs:

    • All of the examples I see on the web are Hierarchy based
    • Jakob Nielsen doesn’t seem to like them (replicates back button)
    • Your article mentions them (as “path-based”) but doesn’t show an example

    Should I give up? Or is my gut right when I feel like there is benefit here?

    All opinions welcome.

    -1
  82. 84

    Thanks a lot to increase my knowledge.
    Now all I know about Breadcrumbs.
    This article really helps me.
    I want to know latest articles in web designing / css / html & all keywords in web designing.
    So please mail me all the articles.

    2
  83. 85

    I simply wished to let you understand that your blog doesn’t present up properly on the BB browser, I added it to my bookmarks and have simply checked from the desktop

    0
  84. 86

    Thanks for a very interesting, informative article. Exactly what I was after in understand breadcrumbs.

    0
  85. 87

    Great Article and very nice examples of Breadcrumbs. I just would like to add one thing that Breadcrumbs also helps in SEO as well. :)

    0
  86. 88

    Thank you for an excellent article.

    Google is still doing the SEO wrong way, since they are accepting semantically incorrect breadcrumbs such as » > › /, but discarding a perfectly valid style.

    http://kumpunen.com/?p=125

    -1
  87. 89

    Nice writeup of breadcrumbs… curious to know if you have come across any websites that do not use links on their breadcrumbs…

    0
  88. 90

    Ratish Ramakrishnan

    December 20, 2010 3:24 pm

    Gives a good overview and benefits of Breadcrumbs and also explained in a very simple way.
    Thanks Smashing

    1
  89. 91

    would you implement breadcrumbs (or a sort of) for a page that can be accessed in two or more different ways?
    for example, imagine a home page of a project management application that has a “messages” module. When the user clicks on one of the messages, they are taken to a page that displays such message, which is related to and that lives under a specific project.

    the issue here is: should the breadcrumb be dynamic, displaying “home / message /” so the user goes back to the originating page (Home)? or should it be complete and “fixed”, displaying “Home / project name / messages / message”?

    in short, is there any value in having dynamic, variable breadcrumbs?

    i write this and think that the answer would be “no”, since breadcrumbs not only help users navigate through the site, but should also be an “educational” tool by which users learn about the site’s structure – and, if they were dynamic, the site structure would not be something easy to learn.


    a few minutes later i found the answer to my own question (provided by Jakob Nielsen), which i posting below for the record and to help other people with a similar doubt:

    * Breadcrumbs should show the site hierarchy, not the user’s history.

    I’m sometimes asked whether website breadcrumbs should follow the fairytale model of Hansel and Gretel. In that story, the children walk through a bewildering forest, dropping breadcrumbs behind them in hopes that they might later find their way out.

    In user interface design, it’s often dangerous to take metaphors too far, and breadcrumbs are again the perfect example. Offering users a Hansel-and-Gretel-style history trail is basically useless, because it simply duplicates functionality offered by the Back button, which is the Web’s second-most-used feature.

    A history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confused progression at the top of the current page doesn’t offer much help.

    Finally, a history trail is useless for users who arrive directly at a page deep within the site. This scenario is when breadcrumbs show their greatest usability benefit, but only if you implement them correctly — as a way to visualize the current page’s location in the site’s information architecture.

    2
  90. 92

    http://www.lendmeyourear.net/breadcrumb-navigation-with-css-arrows.html

    I wrote a guide on how to do css only arrow style breadcrumb navigation without any images or use of arrow characters and thought you might find it interesting in relation to this article

    0
  91. 93

    Thought provoking..

    thanx

    0
  92. 94

    Thank you for taking the time to create this extensive explanation of breadcrumbs. I never quite understand what it did for my blog. I have read a lots of blog postings on breadcrumbs today but I still didn’t get it.

    I am a very visual person and it just wasn’t working for me (the other text only explanation) so I kept on searching until – here I am . I got it the minute I saw the horizontal bar with the (greater than signs) and I was able to relate it to a the kijiji site that I visit often. Breadcrumbs “show me where I am and the path to take be back to my starting point” – completely logical.

    Thanks so much for making your post so visual I appreciate it.

    Dee

    1
  93. 95

    Thank you for taking the time to create this extensive explanation of breadcrumbs. I never quite understand what it did for my blog. I have read a lots of blog postings on breadcrumbs today but I still didn’t get it.

    I am a very visual person and it just wasn’t working for me (the other text only explanation) so I kept on searching until – here I am . I got it the minute I saw the horizontal bar with the (greater than signs) and I was able to relate it to a the kijiji site that I visit often. Breadcrumbs “show me where I am and the path to take be back to my starting point” – completely logical.

    Thanks so much for making your post so visual I appreciate it.

    Dee

    0
  94. 96

    Bineesh Pulparambil

    October 17, 2011 10:15 pm

    Thanks for a very interesting article

    0
  95. 97

    Breadcrumbs is a good navigational idea however I don’t think it’s necessary for websites smaller then 10 pages. Just make certain on the smaller websites you have good illustrations and text which is precise and easy to understand where the user is going to be redirected.
    Chris

    1
  96. 98

    Hi Jacob, thank you for this article. It shed some light on doubts I had, and gave me a lot of new information. And most of all, I got some ideas how I want the breadcrumbs on my site Lucid Mind Center to look like.
    A few weeks ago I decided to incorporate breadcrumbs without even knowing what they were actually called. Soon I figured out the name, but was not really sure where I should position them, as best practice says the headline should be on top of the page.
    I really like breadcrumbs when visiting a site because I can see at a glance where I am. I may not click on breadcrumbs though when moving around.

    So, I decided to incorporate them on the top and bottom, making it easy for my visitors to orient themselves.

    Thanks again, Judith

    0
  97. 99

    I am glad to be the first “user” to be posting a comment. Since Jane was mentioning actual data, let me add at least one single bit of it.

    I am a user but one who is distantly related to web designers; am a content writer. I might have visited around 35,000 to 40,000 sites so far but noticed “breadcrumbs” hardly on may be 100-200 sites. I might have used it to get back to a page, on 5-6 occasions, but that’s more by instinct. I didn’t know they were breadcrumbs or navigation tool etc. etc.

    Now please don’t laugh, I learnt the term just today. I shall start using it as navi tool in future. The article is superbly written.

    0
  98. 100

    did anyone else notice that this page does not have breadcrumbs?

    0
  99. 101

    Nice article , tell us a whole story of breadcrumbs . and all the styles and useage of it . tks !

    0
  100. 102

    Thanks for clarifying when, where and how breadcrumbs should be used. I found the article most illuminating.

    0
  101. 103

    Thank you for a so resourceful article.

    A type of text-based Web site navigation that breaks the site into links of categories and sub-categories allowing major categories of information to be linked in a range of sequential order. Breadcrumb navigation is displayed to the user, so they can easily see exactly where that Web page is located within the Web site. While many types of Web sites use a breadcrumb navigation, it is becoming increasingly common for electronic commerce Web sites to display categories of products in this way.

    0
  102. 104

    Hi,

    Needed a piece of advice, If I have used different breadcrumb trails for different sections of my website,

    For Eg.

    Computers > System Software > Windows XP (AND)
    Computers > Software Systems > XP for Windows > Paretologic

    How and why will it affect my website?
    Is it advisable to do that? What if I have mistakenly created it and cannot change it?

    Also wanted to know if breadcrumbs play any role in deciding SEO rankings, if it does than how?

    Expecting a positive feedback and reply from your side.

    Cheers.

    1
  103. 105

    Hi there,

    I’m aware it has been a while since the article was published, but could not find a definite answer for the following situation.

    What about having the breadcrumbs on the website 2 times? One time before the page / content starts, the other time at the end of the page. Would that be considered spammy or useful?

    Thanks!

    -1

↑ Back to top