An Exploration
Examples
Yahoo! Directory
Yahoo! Directory (http://dir.yahoo.com/) uses horizontal, left-to-right, location breadcrumbs separated by the (>) symbol. Yahoo! uses an interesting approach in that its page headers (Rock and Pop > Radiohead, in this example) reflect the last two elements in the breadcrumb trail. One one hand, this may improve the utility of the breadcrumb in that it shows a clear navigational correlation between the current page and its location in the hierarchy. On the other hand, it may confound the utility of the breadcrumb in that the parent category (Rock and Pop) as listed in the header is not a clickable link whereas it is in the breadcrumb.
Wal*Mart
Wal*Mart (http://www.walmart.com/) uses horizontal, left-to-right, location breadcrumb navigation, delimited by the (>) character on its website. In this example, we are looking at a laser printer, and we have clear links to navigate to increasingly more general product categories. We can quickly go to the general printer page, or more generally, to the computer products page, or to Electronics, or all the way to the Wal*Mart home page. Of note in this example is the "You are here:" indication to the left of the breadcrumb trail. This may aid users in noticing and understanding the utility of the breadcrumbs.
Durham Herald-Sun
The Durham Herald-Sun website (http://www.herald-sun.com/) uses a horizontal, left-to-right, location breadcrumb trail, separating elements with a colon (:) character. This allows a user to jump to the index page of a broader category. In this example, a user reading a story about UNC basketball can jump quickly to the UNC Sports page, to the general Sports page, or all the way back to the homepage. An analogy from the analog world may shed more light on this. If someone was to happen upon an open newspaper on a table and read a story about the Tar Heels, they could recognize quickly that they were in fact reading the sports section, flip quickly back to the front page of the sports section, or, if desired, back to the absolute front page of that day's paper.
UseIt.com (Jakob Nielsen)
Source: http://www.useit.com/about/nographics.html
Jakob Nielsen's UseIt.com website uses left-to-right horizontal location breadcrumbs. Nielsen explains on his site that he changed from using a colon (:) separator to using arrows because users did not understand and make the association between the colons and progressing deeper into his site hierarchy.
Epicurious
Epicurious (http://www.epicurious.com/recipes/find/browse/) is a cooking website where one coincidentally might find information on actual breadcrumbs. This site uses horizontal, left-to-right breadcrumb navigation, with elements separated by the pipe (|) character. In this case, the "browsing by: Chicken | Appetizers | Super Bowl" navigation uses path breadcrumbs; the links do not refer to broader categories in a hierarchy. Instead, they refer to pages previously visited. Rather than a fixed hierarchy, Epicurious uses faceted classification to organize its recipes. For this reason, one might find a barbecue chicken pizza recipe while browsing the chicken recipes, the appetizer recipes, the super bowl recipes, or the barbecue recipes. In the image above, I had started browsing chicken recipes, then refined to show appetizers, and refined again to show super bowl recipes. The sequence of my selections is reflected in the breadcrumb navigation--it does not denote a hierarchy of any kind.
Amazon.com
Amazon.com uses attribute breadcrumbs in its product pages. In the example above, I was viewing the book The Da Vinci Code. The breadcrumbs Amazon provides appear under the product information and reveal links to different multinodal branches under which this particular book might logically appear, based on its attributes. The attribute breadcrumb, in this case, could be considered a series of possible location breadcrumbs.