Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Breadcrumbs In Web Design: Examples And Best Practices

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. [Content Care Dec/03/2016]

What is a breadcrumb? Link

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.

Breadcrumbs on

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.

Further Reading on SmashingMag: Link3

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? Link

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

There are 3 Types of Breadcrumbs Link

1. 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 SitePoint), each text link is for a page that is one level higher than the one on its right.

Breadcrumbs location-based

2. Attribute-based
Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg, 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.

3. 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 Link

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

Mistakes in Breadcrumb Trail Implementation Link

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, Slicethepie 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, mefeedia 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.

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.

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

Example of alternative hierarchy separators.

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.

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 Link

TypePad Design Assistant

classic breadcrumb - example 1.


Classic text-based breadcrumbs

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

Nestle example.

Marchand de Trucs

classic breadcrumb - example 2.

Bridge 55

classic breadcrumb - example 3.

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

2. Replacing “>” with Other Symbols Link

TechRadar UK and BP< use right-pointing triangles.

Using other symbols for hierachy separators - example 2.
Replacing the greater than symbol example.

PSDTUTS and Martique use slashes.

Using other symbols for hierachy separators - example 3.
Using other symbols for hierachy separators - example 4.

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

Using other symbols for hierachy separators - example 5.

Jakob Nielsen’s Alertbox uses right-pointing arrows.

Using other symbols for hierachy separators - example 1.

Target uses colons (:) for separators.

semicolon separator example.

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.


styled breadcrumbs - example 1.

Yahoo! TV

Beautiful breadcrumb trails.


styled breadcrumbs - example 2.

Apple Store

styled breadcrumbs - example 3.


styled breadcrumbs - example 4.


styled breadcrumbs - example 5.



Beautifully-styled breadcrumbs - example.

Beautiful navigation - examples.

4. Breadcrumbs for Multi-Step Processes Link

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

Sequential process example.

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


5. Breadcrumbs with Sub-Navigation Link

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.

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

breadcrumb with sub-navigation example.

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

Cranfield University 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 Breadcrumbs

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

flyout menu - example 3.

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.

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

subnavigation example 1.

Wowhead has a multi-level sub-navigation scheme.

6. Interactive Breadcrumbs Link

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

interactive example 1.

7. Experimental Examples Link

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

Experimental example 1.


Footnotes Link

  1. 1
  2. 2
  3. 3 #further-reading-on-smashingmag
  4. 4
  5. 5
  6. 6
  7. 7

↑ Back to top Tweet itShare on Facebook

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

    Marcy Kellar

    March 17, 2009 1:07 pm

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

  2. 2

    great as allways, thanks Smashing!

  3. 3

    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.

  4. 4

    Really usefull article, thanks.

  5. 5

    Simon Harlinghausen

    March 17, 2009 1:35 pm

    And I thought breadcrump is dead.
    Surprise. Surprise.

  6. 6


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

  7. 7

    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.

  8. 8

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

  9. 9

    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 .. :(

  10. 10

    Great article and examples. One that I would have included as well would have been

    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.

  11. 11

    Brian Temecula

    March 17, 2009 4:12 pm

    Nice article. Go SM!

  12. 12

    Very good

  13. 13


    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.

  14. 14

    Frank Sinton

    March 17, 2009 8:34 pm

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


  15. 15

    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

  16. 16

    Abdulsalam Alasaadi

    March 17, 2009 9:22 pm

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

  17. 17

    nice article

  18. 18

    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.

  19. 19


  20. 20

    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.

    • 21

      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.

  21. 22

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

  22. 23

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

  23. 24

    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?

  24. 25

    Like it! Keep it up!

  25. 26

    Very informative article…

  26. 27

    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!!


  27. 28

    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?

  28. 29

    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.

  29. 30

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

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

  30. 31

    Why are they called Breadcrumbs? this is something that is nicely done on the 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.

  31. 32

    Patrik Krupar

    March 18, 2009 2:06 am

    Very usefull article! Thank you.

  32. 33


    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!

  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.

  34. 35


    March 18, 2009 3:41 am

    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.

  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.

  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.

  37. 38

    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…

  38. 39

    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.

  39. 40

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

  40. 41

    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.

  41. 42


    March 18, 2009 7:35 am

    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.

  42. 43


  43. 44

    Very good!

  44. 45

    This is a very nice article…

  45. 46

    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?


  46. 47

    Mithun Sreedharan

    March 18, 2009 9:34 pm

    Thank you!!

  47. 48

    Another great article. Very useful, thanks a lot!

  48. 49

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

  49. 50

    Tom Bradshaw

    March 19, 2009 5:50 am

    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.

  50. 51

    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.

  51. 52

    Jakob Nielsen

    March 19, 2009 10:00 am

    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

  52. 53

    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 » 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” » » 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

  53. 54

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

  54. 55

    Kat Thompson

    March 19, 2009 2:56 pm

    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.

  55. 56


  56. 57


  57. 58

    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.

  58. 59

    Cristhian Bedon

    March 20, 2009 6:58 am

    Breadcrumbs have been getting more and more attention lately.

  59. 60

    Useful post

  60. 61

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

  61. 62

    Good Article, it is so nice

  62. 63

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

  63. 64

    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.

    • 65

      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.

  64. 66

    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.

  65. 67

    Dave Merrick

    July 28, 2009 8:14 pm

    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?

  66. 68

    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.

  67. 69

    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

  68. 70

    Luis Lopez Garay

    January 12, 2010 8:55 pm

    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

  69. 71

    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?

  70. 72

    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.

  71. 73

    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!

  72. 74

    Luis Bahiana

    May 12, 2010 9:09 am

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

  73. 75

    I noticed that 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?

  74. 76

    Brad Einarsen

    August 13, 2010 11:36 am

    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.

  75. 77

    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.

  76. 78

    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

  77. 79

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

  78. 80

    Harish Sharma

    October 24, 2010 9:24 pm

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

  79. 81

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

  80. 82

    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

  81. 83

    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.

  82. 84

    Thought provoking..


  83. 85

    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.


  84. 86

    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.


  85. 87

    Bineesh Pulparambil

    October 17, 2011 10:15 pm

    Thanks for a very interesting article

  86. 88

    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.

  87. 89

    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

  88. 90

    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.

  89. 91

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

  90. 92

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

  91. 93

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

  92. 94

    Akshay singal

    March 11, 2014 11:07 am

    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.

  93. 95


    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.


  94. 96

    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?



↑ Back to top