Breadcrumbs In Javascript

Those unfamiliar with the breadcrumb navigation concept should read MartinB's article, Breadcrumbs for All, a great tutorial if you're using SSI. ASP people should read Aardvark's Breadcrumbs for Those Using ASP and jstetser has written a nice PHP tutorial entitled Breadcrumbs for PHP Lovers.

Why Javascript?

Because I can. I know that being a client-side technology Javascript is bound to be less of a reliable tool than a server-side script that produces uncontroversial HTML, but it will work for 95% or more of internet users and, frankly, not everyone has server-side tools available to them.

All we're going to do here is grab the URL and cutting off the 1st 8 chars (allowing for http:// and https://). We then grab the next chunk up to a "/" and discard that (the domain name). Now, we grab all the remaining chunks between the "/" characters and build the html string with them.

To use it, stick the function between your HEAD tags (or in a .js file) and then call it where you want the breadcrumbs to appear with <script>breadcrumbs()</script>.

[Ed note: The following script will not degrade gracefully in pre-4.x browsers. Users of Javascript 1.0 and 1.1 will not see the navigation used below. Instead, they will encounter JavaScript errors. However, this script is a good basis for accomplishing a breadcrumb navigation with Javascript on any site.]

<script language="JavaScript" type="text/javascript">
<!--
  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);
  }
// -->
</script>