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>