Breadcrumbs Edit
Problem summary
The user needs to know his location in the website's hierarchical structure in order to possibly browse back to a higher level in the hierarchy.
Example
Usage
- Use when the structure of the website follows a strict hierarchical structure of similar formatted content.
- Use when the structure of the site is parted in to sections which can be divided into more subsections and so on
- Use when the user is most likely to have landed on the page from an external source (another site deep linking to the web page in question). For instance from a blog or a search engine.
- Use when the page in question is placed fairly deep into the hierarchy of pages and when no other form of visual navigation can show the details of the same deep level.
- Use together with some sort of main navigation.
- Do not use on the topmost level of the hierarchy (typically the welcome page)
- Do not use alone as the main navigation of the website.
Solution
- Show the labels of the sections in the hierarchical path that leads to the viewed page.
- Each label of the higher level subsections have links that lead to the respective section of the site.
- The label of the current page is at the end of the breadcrumb and is not linked.
- Each label is parted with a separating character. Popular characters are » (
») or >. - The separating characters and the spaces between the links and the labels are not linked.
- The labels of each section preferably match the titles of that section.
Rationale
- Breadcrumbs show the user where he is now in relation to the site’s hierarchy: how information is structured.
- The structure of the website is more easily understood when it is layed out in a breadcrumb than if it is put into a menu, why the learning to navigate the site comes natural.
- Breadcrumbs take up minimal space and even though not all users use them, they still hint the structure of the website and the current location of the page in question.
- The term ‘breadcrumb’ is wrong, as it implies the history of how the user got to that page. A more correct term would describe the current location’s place in the hierarchy of the website.
More example images of the 'Breadcrumbs' pattern
-
-
From apple.com.
-
Breadcrumb at bell.com
-
A breadcrumb trail with dropdown that show the menu options at that level.
This document is in version 3 and was last updated on Jul 8, 2009 by Anders. Edit this pattern.
Related information
Collection
Related patterns
Related links
Breadcrumbs has 5 comments
-
about 1 year ago
Rob
26 Mar 2008
While I realize it is in common use, I think the name Breadcrumbs connotates a different metaphor than way of documenting a user’s location in a hierarchy. The story is that a traveler dropping breadcrumbs in order to retrace the route. So if you navigate from A to B to C to B to D then a true breadcrumb trail would be A->B->C->B->D. The algorithm recommended here would return A->B->C->D.
I’m not arguing that this isn’t more useful; I’m arguing that the name Breadcrumb doesn’t describe this pattern. A browser history implements something more akin to route retracing.
Pattern names should accurately indicate its function. While I don’t have an alternative suggestion, perhaps someone else will. (HistoryTrail perhaps?)
Peace,
Rob:-]
-
about 1 year ago
Keil
17 Dec 2008
I agree with you Rob, although I also don’t have a much better suggestion. Perhaps “Site Ladder” or “Application Ladder,” because it helps the user climb back up the site’s page hierarchy?
I want to emphasize, though, that I think whatever you call this, it is an important and appropriate design technique in certain situations (as described above). -
7 months ago
Dmitri
23 Jun 2009
As much as I see the point in the two above comments, it is a reality that in most agencies that is exactly what it is called – why reinvent the wheel?
-
5 months ago
markv
21 Aug 2009
Visually, and conceptually I think the breadcrumb term is quite apt if you think about the story of Hansel and Gretel.
The bread crumb trail stretches from home to your current location.
The further you are from home the longer the trail. This is also visually what happens to the string of words in the web version. The trail is long if you are far from “home”.
You can follow the trail (by eating up each bread crumb) until you get back home. So the crumbs (directories) disappear as you navigate your way towards home.
In both the story and the web version, the breadcrumb trail shows 1 single path back home.
In both cases the path is a very minimal indicator of how to get home.
Both help you navigate a fixed space.
In the Hansel and Gretel story, the bread crumbs are not really like the browser history “showing you where you have been”. Because in the web you can jump from any other web page. However the web breadcrumbs show a path through a fixed navigation space (the web site you are on) which is more akin the fixed physical space (the forest that Hansel and Gretel are walking in ). -
5 months ago
markv
21 Aug 2009
In short:
The breadcrumbs (in Hansel and Gretel and in this web pattern) are a minimal single path that lead you step-by-step (crumb-by-crumb) back home through a fixed but complex navigation space ( the forest / a complex web site).
It would be very difficult to find a better way to describe all these concepts in a single word.