Main Page Content
Breadcrumbs in Javascript
Rated 3.68 (Ratings: 6) (Add your rating)
Log in to add a comment
(11 comments so far)
Justin Whitford
User since: September 04, 2001
Last login: August 15, 2006
Articles written: 2
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>
