Breadcrumbs Design Pattern

By Bill ScottFebruary 13th, 2006

Problem Summary

The user needs to be able to navigate up (towards the root page) and have an understanding of where she is in relation to the rest of the site.

Breadcrumb from Yahoo! Travel

The name breadcrumbs is probably a misnomer. Since it invokes the thought of Hansel & Gretel leaving breadcrumbs so that they could return the exact way they came. This pattern is more like a homeward path. It doesn’t capture the trail of your path but instead it marks the path from home to wherever you might be currently be in the site hierarchy. Even with the misnomer, we felt it best to stick with the terminology that was commonly used.
The pattern can be found at: Breadcrumbs.

12 Comments

  1. Why the last label in the breadcrumb should be the title of the current page?

    I prefer this:

    Weather > US > New York State
    New York

    instead of this:

    Weather > US > New York State > New York
    New York

    In the examples above the first line is the bradcrumb and the second line is the actual heading of the page. In the second example there is repetition (double New York) that I think should be avoided.

  2. Yes, I have seen it both ways. The reason we choose to repeat the current page is that it allows the breadcrumb to communicate three things:

    - Location. Where am I? Last item clues you to that.
    - Context. What is the path upward? Read down to the current location and the complete context is represented.
    - Navigation. Links show where I can go. Unlinked label (where I am) shows current location.

    It allows the breadcrumb to stand on its on.

    That’s what drove us to the current design.

  3. It’s been my experience that if a person CAN be confused by something, s/he WILL be. Thus, leaving off the current page as the final item in the breadcrumb, as George suggests, may eliminate repetition but I’d be willing to bet that it would confuse more than a few site visitors.

  4. Michelangelo Iaffaldano said:
    February 17, 2006 at 6:02 am

    An addtional accessibility consideration is: what does the breadcrumb sound like when spoken by a screen reader? There is an interesting discussion of this problem on the standards schmandards site and elsewhere.

  5. Has anyone ever dealt with a situation where the page title is very long? This makes it hard to have the current page title at the end of the breadcrumb. For example, we’re having this problem on our site on this page:

    http://www.sims.berkeley.edu/about/news/pressreleases/saxenian02162006

  6. Has anyone dealt with the problem of really long page titles appearing as the last item in a breadcrumb? In that instance would you truncate? This page shows the problem:

    http://www.sims.berkeley.edu/about/news/pressreleases/saxenian02162006

  7. A reasonable description for most cases, but what about rtol languages? I’d suggest instead of “Separate each label with a greater-than sign ( > ).” something more like “Separate each label with a greater-than sign ( > ) for left-to-right languages, or a less-than sign (

  8. A reasonable description for most cases, but what about rtol languages? I’d suggest instead of “Separate each label with a greater-than sign ( > ).” something more like “Separate each label with a greater-than sign ( > ) for left-to-right languages, or a less-than sign ( < ) for right-to-left languages.”

    (repost as the lt symbol mucked things up – hopefully using the entity works. If not, you know what I mean :)

  9. A method that I often use is to put the breadcrumbs in a OL with the most top-level item above.
    Then I give all the LI’s (except for the first one) a background image that resembles a > symbol.
    Looks meaningfull with or without the css.
    Screenreaders will allso have a certain hierarchie while reading the breadcrumb.
    The only thing I might want to do is to give the links a proper rel attribute.

  10. How do I achieve this breadcrumb functionality by using the YUI library?

  11. Really great comments. Let me suggest moving the discussion to our Online patterns discussion forum at http://groups.yahoo.com/group/ydn-patterns. It’s easier to discuss there and would love to capture the various thoughts here.

    http://groups.yahoo.com/group/ydn-patterns/message/20?threaded=1

  12. I personally thing that greater-than sign (“>”) is visually disturbing and just ugly! I think it should be → instead.