What is a breadcrumb?• The term comes from the Hansel and Gretel 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.

• It is a navigation aid used in user interfaces.

• It allows users to keep track of their locations within programs or documents.

• It is a type of secondary navigation scheme that reveals the user’s location in a website or Web application.

Example

•

• Breadcrumbs on Delicious.com

• Breadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers.

• A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.

Types of breadcrumbs• There are three types of web breadcrumbs:

• Path: path breadcrumbs are dynamic and show the path that the user has taken to arrive at a page.

• Location: location breadcrumbs are static and show where the page is located in the website hierarchy.

• Attribute: attribute breadcrumbs give information that categorizes the current page.

1- Location-basedLocation-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).

2- Attribute-basedAttribute-based breadcrumb trails display the attributes of a particular page.e.g. in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page

3- Path-basedPath-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

Breadcrumb Navigation Design Considerations

• What should be used to separate link items?

i- Most recognizable symbol is >

• How big should it be?• You don’t want your breadcrumbs to dominate the

page. (b/c it’s an aid to users)

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

Showcase

1. Classic Text-Based Breadcrumbs

2. Replacing “>” with Other Symbols

• 3. Beyond Simple Text Links

• 5. Breadcrumbs with Sub-Navigation

How to create Breadcrumps

1- CSS Breadcrumbs

• Dynamic >> Drive >> CSS here• Dynamic >> Drive >> CSS >> Horizontal Menus

• CSS<style type="text/css">.breadcrumb{font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana,

Helvetica, sans-serif;}

.breadcrumb a{background: transparent url(media/breadcrumb.gif) no-

repeat center right;text-decoration: none;padding-right: 18px; /*adjust bullet image padding*/color: navy;}.breadcrumb a:visited, .breadcrumb a:active{color: navy;}.breadcrumb a:hover{text-decoration: underline;}</style>

• <p class="breadcrumb"><a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.dynamicdrive.com/style/">CSS</a> here</p>

• <p class="breadcrumb"><a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.dynamicdrive.com/style/">CSS</a> <a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal Menus</a> Here</p>

• http://www.dynamicdrive.com/style/csslibrary/item/css-breadcrumbs/

2- JavaScript Breadcrumb Scriptfunction breadcrumbs(){ sURL = new String; bits = new Object; var x = 0; var stop = 0; var output = "<a href=\"/\">Home</a>

&nbsp;>&nbsp; "; sURL = location.href; sURL = sURL.slice(8,sURL.length); chunkStart = sURL.indexOf("/"); sURL = sURL.slice(chunkStart+1,sURL.length)

• while(!stop){ chunkStart = sURL.indexOf("/"); if (chunkStart != -1){ bits[x] = sURL.slice(0,chunkStart) sURL = sURL.slice(chunkStart+1,sURL.length); }else{ stop = 1; } x++; } for(var i in bits){ output += "<a href=\""; for(y=1;y<x-i;y++){ output += "../"; } output += bits[i] + "/\">" + bits[i] +

"</a> &nbsp;>&nbsp; "; } document.write(output + document.title);

}

• It prints out a breadcrumb trail that looks like this:

• Home  >  js  >  scripts  >  breadcrumbs  >  JavaScript: Breadcrumb Script -

webreference.com

• Finally, you will need to call the script.

• <script language="JavaScript"> breadcrumbs(); </script>

Benefits of Using Breadcrumbs

1- Convenient for users i- In a large multi-level website, users can

navigate to higher-level categories more easily.

2- Reduces clicks or actions to return to higher-level pages

3- Doesn’t usually hog screen space۔

Usability

• Some commentators criticize Path-style breadcrumbs because they duplicate functionality that properly subsists in the browser; namely, the 'Back' button and browsing history.

• Location breadcrumbs are not necessarily appropriate for sites whose content is so rich that single categories do not fully describe a particular piece of content.

Mistakes in Breadcrumb Trail Implementation

• Using breadcrumbs when you don’t need to

• Using breadcrumb trails as primary navigation

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

References

• http://en.wikipedia.org/wiki/Breadcrumb_%28navigation%29

• http://www.webdesignpractices.com/navigation/breadcrumb.html

• http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

• http://www.dynamicdrive.com/style/csslibrary/item/css-breadcrumbs/

• http://www.webreference.com/js/scripts/breadcrumbs/