Home : Webmonkey : Code : Breadcrumbs : Position Crumbs : Javascript

I originally submitted this code to Evolt on 04 Sep 2001

introduction

There are two main ways of approaching breadcrumbs. The first is the kind left by Hansel and Gretel, which is of the form, 'I went here, then here, then here, then here'. The second is probably more useful as a navigation aid in a web site and is of the form, 'I'm at this page, which is part of this section, which is part of this section'.

The script below, uses a web site's directory structure to show where a given page is in that structure. Obviuosly, it isn't very useful for sites, where all the pages are in a single directory.

example

code

Drop the code into a file called crumbs.js. Be sure to include the .js file in each page with:

<script type='text/javascript' src='crumbs.js'></script>

Now, at the spot where the crumbs are to appear, include:

<script type='text/javascript'>
<!--
breadcrumbs();
//-->
</script>

The contents of crumbs.js file follows:

/*
Copyright Justin Whitford 2001.
  http://www.whitford.id.au/
Perpetual, non-exclusive license to use this code is granted
on the condition that this notice is left in tact.
*/
  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);
 }

discussion

All we did was grab the URL and cut off the 1st 8 chars (allowing for http:// and https://). We then grabbed the next chunk up to a "/" and discarded that (the domain name). Finally, we grabbed all the remaining chunks between the "/" characters and built 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>.

variation #1

Someone contacted me to ask how, if their content is in an iframe, they could update the breadcrumbs outside the iframe. The script as it stands just outputs the crumbs where it is called. With some minor adjustments, we can just make it insert the HTML where we like, using document.getElementById()

This is all assuming that the HTML file for the iframe is from the same domain as the HTML file containing it. Browser security restrictions may get in the way if this is not the case

variation #1 code

In our parent HTML, we create and name a div, so that we have a target:

   <div id="crumbdiv"></div>
 

We include the script in the parent HTML but change a couple of lines:

//  function breadcrumbs(){
  function breadcrumbs(arg){
//    sURL = new String;
    sURL = new String(arg);
    bits = new Object;
    var x = 0;
    var stop = 0;
    var output = "<A HREF=\"/\">Home</A> | ";

//    sURL = location.href;
 
...
//   document.write(output);
   document.getElementById("crumbdiv").innerHTML= output;
 

In our child frame, we call the script like this:

   <script>
      parent.breadcrumbs(location.href);
   <script>
 

variation #2

Someone contacted me to ask how to replace dashes and underscores with spaces in the text of the links.

To do that, we can create a list of substitutions and apply them to the chunks as they're outputted.

variation #2 code

At the end of the javascript, we add in our replace list and a function to do the replacements

replaceList = {
  '_':' '
  ,'-':' '
  ,'& ':'&amp; '
  ,'\"':'&quot'
  ,'<':'&lt;'
  ,'>':'&gt'
};
function clean(arg){
  out=arg;
  for(var n in replaceList){
    while(out.indexOf(n)!=-1){
      //could be done with regex instead...
      after=out.substring(0,out.indexOf(n))
        +replaceList[n]
        +out.substring(out.indexOf(n)+1,out.length);
      out=after;
    }
  }
  return out;
}
 

Then we change this line:

      output += bits[i] + "/\">" + bits[i] + "</A>  | ";	 

To this:

      output += bits[i] + "/\">" + clean(bits[i]) + "</A>  | ";	 

variation #3

I've been asked how to include the current page at the end of the list.

variation #3 code (using current page title)

Replace...

    document.write(output);

... with...

    document.write(output + document.title);

variation #3 code (using current page file name)

Replace...

    document.write(output);

... with...

    document.write(
      output + sURL.substring(0,((sURL.indexOf("."))?sURL.indexOf("."):sURL.length))
    );