(Breadcrumb Navigation) Breadcrumb By: Zulqarnain Abdul Jabbar

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-based Location-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-based Attribute-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-based Path-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 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{ .breadcrumb a:hover{ text-decoration: underline; </style>

<p class="breadcrumb"><a href="http://www. dynamicdrive <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 Script function breadcrumbs() { sURL = new String; bits = new Object; var x = 0; var stop = 0; var output = "<a href=\"/\">Home</a>  >  "; 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>  >  "; } 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/