Automatic Breadcrumbs

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:

References: