Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Automatic Breadcrumbs (See related posts)

From: http://hyperdisc.unitec.ac.nz/materials/javascript/top10/breadcrumbs.htm

It is possible to hard-code the links in a breadcrumb trail - i.e. to add all the links manually. It is also possible to automatically produce a breadcrumb trail for all pages. This can be done server-side using XSSI, ASP, ColdFusion or PHP. It can also be done client-side using JavaScript.

This is working at the top of every page in the Materials site.

You need to add the function JavaScript to the HEAD of every page and the call to the function in the BODY of every page, wherever you would like the breadcrumb trail to appear. You can add the call to the function multiple times in the same page.

<HEAD>
<script language="JavaScript">
<!-- 
  function breadcrumbs(){
    sURL = new String;
    bits = new Object;
    var x = 0;
    var stop = 0;
    var output = "<div class=topnav><A HREF=/>Hyperdisc</A> &raquo; ";

    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> &raquo; ";
    }
    document.write(output + document.title);
	document.write("</div>");
  }
 // -->
</script>
</HEAD>


<BODY>

<SCRIPT LANGUAGE="JavaScript" TYPE='text/javascript'>breadcrumbs()</SCRIPT>

</BODY>


Points to note about this version of the script:

* It wraps the entire breadcrumb trail in a CSS class called "topnav". You can style this however you like, or you could modify the script to change 'topnav' to any CSS class name you want.
* It names the site "Hyperdisc". You need to modify the script to change the name to something else.
* It assumes that the homepage of the site is in the root directory of the web server. If the homepage of your site is actually in a sub-directory, you would need to seriously modify the script.
* You need to have an index.htm (or equivalent) file in each directory or the user will experience 403 errors.
* Apparantly this script causes errors in older browsers.
* Also note that this script does not work in frames.

Comments on this post

imensing posts on Sep 06, 2007 at 14:07
Would like to try breadcrumb script but do not need it to display the home link.
This is my problem. The link below is an example of what the Home link would have to go to.

So basically the home page is in a sub directory
http://www.home.com/mainhome/ this is the actual home page.

The other option maybe is that the home page link is not even displayed, making the crumbs look like this

home2> home3> Home4
In this case there is no home link at all, but the crumbs start a couple of levels down. Is this possible?
imensing posts on Sep 06, 2007 at 14:10
or is it possible to make the home page crumb not linked, but the rest of them are?

You need to create an account or log in to post comments to this site.


Click here to browse all 5147 code snippets

Related Posts