"Reading and sharing" Web navigation design-breadcrumbs

Let's talk about the origin of bread crumbs:

Long, long ago, on the edge of the great Forest lived a poor woodcutter, his wife and two children with him. His son was named Hansel, and his daughter was Gretel. Then the woodcutter's wife died, and he married a stepmother to the children. The stepmother planned to take two children to the depths of the forest and run away while they were asleep. Hansel accidentally know the stepmother's plan, so secretly put a piece of bread hidden in the pocket.

On the way to the forest, Hansel quietly crushed his bread, and occasionally stopped to scatter crumbs on the road. The stepmother slipped away while the children were asleep, and Hansel and Gretel woke up in the dark. Hansel comforted his sister and said, "When the moon comes out, we can see the crumbs that I scatter on the ground, and it will surely point us to the way home." But when the moon rose, they could not find a crumb of bread on the ground, and they were all pecked out by the birds flitting about in the woods and fields.

This is the story of the bread crumbs described in Grimm's Fairy tales. Don't know from which day, Hansel Crumbs began to appear quietly in a site's navigation position, and then quickly spread all over the world, become today well-known "breadcrumbs."

Find out more about the definition of breadcrumb navigation:

Wikipedia on the definition of bread crumbs, the http://www.aliyun.com/zixun/aggregation/8048.html ">websites part of the explanation is this:

Crumbs usually appear horizontally at the top of the page and are generally located below the header or head of the page. They provide the user with a link to any previous page (which is also the path to the current page), which is usually the parent page of the page in the hierarchy.

Crumbs provide a quick way for users to go back to the home page or to the portal, most of which look like this: Home → category page → sub category page

The following is an excerpt from English:
Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. Tightly provide links back to each previous page of the user navigated through in order to get to the "current page" for hierarchical Structures usually the parent pages of the current one. Breadcrumbs provide a trail for the "user to follow" to the starting/entry point of a website. Tightly may look something like this:
Home page→section page→subsection Page

Second, the role of bread crumbs:

One is: To provide a multi-channel interactive way to facilitate users to jump to other pages;

The second is: the information structure and collection way of this information are shown from one side.

Three is: "Crumbs" information structure for the site's SEO also has great benefits, it can be more emphasis on site keywords, expand the scope of keywords, optimize the site's SEO.
The crumbs contain three kinds:

1, location of breadcrumbs path

One of the most common breadcrumbs. The current page path has a unique location on the mall.

Location based (location-based) breadcrumbs Show users which level of page they are on the site. They are typically used for navigation scenarios with multiple levels (typically more than two levels). In the following example (from SitePoint), the text link for each page indicates that it is a higher level than the text link to its right.

Examples (from the Blue Ideal forum): http://www.sitepoint.com/article/introducing-joomla/

B provides shortcuts to previously visited pages (or Web sites) and other areas.

In essence, it is a linear representation of the structure of a Web site. The location breadcrumbs path on the web shows not the history of navigation, but a fixed location throughout the site. That is, no matter how the user arrives at the location page, the breadcrumb path is the same.

2, Route breadcrumbs

Route crumbs are dynamic. The current page path is generated based on the user's clicks.
Depending on how you arrive, the breadcrumb path on a particular page is different. Path (path-based) breadcrumb paths show the steps that users get to a specific page, showing the page that the user visited before reaching the current page.

Example: http://www.epicurious.com/old version Qzone legacy path

3. Property breadcrumbs Path

The current page can be found by n paths.
Attribute breadcrumbs are a way of describing a page, not its location in the site, nor the path to access, but rather its location in a metadata scenario that is often subject-level.
A breadcrumb path based on an attribute (attribute-based) displays the characteristics of a particular page.

Example：
A, in Newegg, the breadcrumb path represents the feature content that is displayed on a particular page.
This page shows all the computer cases that have been manufactured by Lian Li and have microatx micro-tower factors.

B, Amazon, the bread crumbs Express is the item belongs to the category, and allows to click on the category name access to the superior category. The entire path provides the lowest level of the page. That is to say, it provides a number of links to the node page.

Source: http://isd.tencent.com/?p=2101