Dynamic Breadcrumbs with JavaScript

April 29, 2007 | 1 Comment

Note: This script has been updated. You are free, of course, to use any version.

Update 11/6/2007: In updating WordPress I have apparently borked the display of the code. It is in such disrepair that I can’t remember how to put it back together. Given that this is outdated code (and now broken) and given that I have no intention of rewriting it in its original state, I don’t recommend using it.

I wrote this in 2002. I think this was the first time I used JavaScript to solve a real problem. It works well and it’s still in use on a few web sites, including HealthLinks, the site I currently work on at UW. I plan to refactor and publish an updated version soon. For now, feel free to try it out.

// Dynamic Breadcrumbs
// Written by Harry Love (http://harrylove.org/)
// License: http://creativecommons.org/licenses/by-sa/3.0/
// Created: July, 2002
// Last update: May 3, 2007
 
// To place breadcrumbs in your page, save this
// file (the one you're reading) as a .js file to a directory that makes sense to you.
// Link to it in the  portion of your web page with: <script src="/path/to/your/file.js" type="text/javascript"></script>
// Then in the  portion of your page,
// wherever you want the breadcrumbs to appear,
// paste the following: <script type="text/javascript">createBreadcrumbs();</script>
 
// To style the breadcrumbs I recommend wrapping the above line
// in HTML like this:
// <p id="breadcrumbs"><script></script></p>
// Then use CSS to style it
 
// NOTE: You can reduce the size of this file
// by removing all of the comment lines ("//")
 
// BEGIN BASIC CUSTOMIZATION
 
// Starting Point: 1 = domain, 2 = 1st directory, 3 = 2nd directory, etc.
// Must be specified as an integer; no floating point numbers.
// ***Note***: If the starting number is greater than the number of
// directories you have, the URL will be undefined.
var startPoint = 1; // idea from Hassan Schroeder
 
// Separator: set the character(s) that will be used to
// separate each of the breadcrumb links.
// Set the space in between each link by
// specifying a number of non-breaking spaces ( ).
// The default separator is a "greater than(&gt;)" symbol (&gt;).
var sep = " &gt; ";
 
// Starting Name: setting startName to "domain" will
// use the full domain name (www.yourdomain.com).
// Any other text will be used literally.
// E.g., specifying "Home" will use "Home" as the first
// link in the chain.
// ***Note***: if startPoint is greater than 1, it will start
// the chain at a point beyond the domain.  startName will
// be used for the name of the first link, regardless of where it
// starts.
var startName = "Home";
 
// Uppercase or lowercase directory names?  If
// uppercase is set to yes, the first character
// in each of the directory names will be capitalized.
// If allUppercase is set to yes, the entire directory
// name will be capitalized for each directory.
var uppercase = "yes";
var allUppercase = "no";
 
// You can use the following to replace special characters
// in your directory names and page titles
var replaceSpecialCharacters = "yes";
var specialCharactersUpper = "yes";
 
// The text or characters you want to replace go in the first set of quotes
// The replacement text or characters go in the second set
// E.g., in the first bracket, underscores are replaced by non-breaking space
var charactersToReplace = [
[ "_" , " " ],
["text to replace", "replacement text"],
// Copy/paste the the line above to add your own
// You can also delete the above lines if you wish
// If you do copy/paste, copy the brackets and the comma that comes after it
[ "leave this alone" , "leave this alone" ]
];
 
// Endpoint: how do you want the script to handle a
// URL that ends in a directory name? E.g., if the URL
// is http://www.mydomain.com/start/, do you want the
// script to write the name of the directory or the
// title of the default document in this directory?
// You have 2 choices: directory or title.
var endPoint = "title";
 
// END BASIC CUSTOMIZATION
 
var d=document;
var url = d.location.href;
var endChar = url.substr(url.length-1);
 
// Replace the "//" in "http://www.mydomain.com" with "/" and store that in the url variable.
url=url.replace("//","/");
 
// Separate the link text from the link
var urlText = url;
 
// Split the URL into segments and store them in an array using "/" as a delimiter.
var urlLinkArray=url.split('/');
 
// Get the domain name if we're using that for the home text
if(startName=="domain") {
var y;
startName="";
for(x=0;x<startpoint;x++)>
y=x+1;
if(y&gt;=1&amp;&amp;y<startpoint)>
startName = startName + urlLinkArray[y] + "/";
} else {
startName = startName + urlLinkArray[y];
}
}
}</startpoint)></startpoint;x++)>
 
if(replaceSpecialCharacters == "yes") {
for(x=0;x<characterstoreplace.length;x++)>
var myRegExp = new RegExp(charactersToReplace[x][0], "g");
urlText = urlText.replace(myRegExp,charactersToReplace[x][1]);
}
}</characterstoreplace.length;x++)>
 
var urlTextArray=urlText.split('/');
var urlL = urlLinkArray.length;
var uppercaseText;
var lowercaseText;
var lcase;
var linkName=new Array();
 
// According to the variables, change upper- or lowercase directory names.
// Also replace special characters if we're doing that
if(uppercase=="yes"&amp;&amp;allUppercase=="no") {
if(replaceSpecialCharacters=="yes"&amp;&amp;specialCharactersUpper=="yes") {
for(x=0;x<characterstoreplace.length;x++)>
var myRegExp = new RegExp(charactersToReplace[x][1]+"[a-z]", "g");
for(y=2;y<urll;y++)>
</urll;y++)> 				if(urlTextArray[y].search(myRegExp)!=-1) {
var regExpArray = new Array();
regExpArray = urlTextArray[y].match(myRegExp);
for(z=0;z<regexparray.length;z++)>
if(urlTextArray[y].search(myRegExp)!=-1) {
var lastLetter = regExpArray[z].substr(regExpArray[z].length-1,regExpArray.length).toUpperCase();
var newText = charactersToReplace[x][1]+lastLetter;
urlTextArray[y] = urlTextArray[y].replace(regExpArray[z],newText);
}
}
}
}
}
}</regexparray.length;z++)></characterstoreplace.length;x++)>
 
for(x=2;x<urll;x++)>
</urll;x++)> 		uppercaseText=urlTextArray[x].substr(0,1).toUpperCase();
lowercaseText=urlTextArray[x].substr(1, urlTextArray[x].length);
linkName[x]=uppercaseText+lowercaseText;
}
} else if(allUppercase=="yes"||uppercase=="yes"&amp;&amp;allUppercase=="yes") {
for(x=2;x<urll;x++)>
</urll;x++)> 		linkName[x]=urlTextArray[x].toUpperCase();
}
} else {
linkName=urlTextArray;lcase="yes";
}
 
// Now create the home URL based on the start point
var start=urlLinkArray[0]+"//";
if(startPoint&lt;1){startPoint=1;}
for(y=1;y&lt;=startPoint;y++) {
start=start+urlLinkArray[y]+"/";
}
 
// This is the function that actually writes breadcrumbs
// to the HTML page.
function createBreadcrumbs() {
if(lcase!="yes") {
d.write('<a href="'+start+'">'+startName+'</a>');
} else {
startName = startName.toLowerCase();
d.write('<a href="'+start+'">'+startName+'</a>');
}
 
if(urlL&gt;2) {
for(x=startPoint+1;x<urll;x++)>
</urll;x++)> 			if(x<urll-1)>
</urll-1)> 				if(x==urlL-2&amp;&amp;linkName[urlL-1]=="") {
if(endPoint=="directory") {
d.write(sep+linkName[x]);
break;
} else {
if(lcase!="yes") {
d.write(sep+d.title);
break;
} else {
var ttl = d.title.toLowerCase();
d.write(sep+ttl);
break;
}
}
} else {
start=start+urlLinkArray[x]+"/";
d.write(sep+'<a href="'+start+'">'+linkName[x]+'</a>');
}
} else {
start=start+urlLinkArray[x];
if(endChar=="/") {
d.write(sep+linkName[x]);
} else {
d.write(sep+d.title);
}
}
}
}
}

1 Comment

  1. Harry Love spoke thusly:

    Aaaargh! In editing the page the WYSIWYG editor took out the code indents and re-interpreted several code elements as tags. I’ll have to clean this one up again.

Say, say, say, what you want.