Javascript Breadcrumbs Navigation

Many websites today feature navigation systems that allow the user to move around the content on their website, many provide a hierarchical menu to assist the user in relating a specific page to the overall site. This menu can take many forms and examples are all around us, such as the 'directory tree' structure that we see in Windows Explorer and the MicroSoft Developers Network site, to the menu system used in this site, which is based on one provided by DHTML Central.

screenshotFor this tutorial we are going to replicate what is referred to as a 'breadcrumb' trail through the site, this shows the user where they are in teh site in relation to the front page and provides a link to each of the levels in between the top and the current location. The screenshot opposite from a part of the Developer.com site. You can see here that they have listed and provided links for the parent folders of all nodes from the current location back to the top of the site. Here we will look at how we implement a similar system using Client Side Javascript to produce a breadcrumb trail through a site for the users to use, although a similar approach could be - and has been - taken to create the trail using a Server Side Script.

To achieve this we need to know something about every parent folder between the current one and the top of our site, luckily this is provided in the URL, for example the following URL :

http://www.greggriffiths.org/webdev/clientside/javascript/breadcrumbs/

tells us that we are in the breadcrumbs folder, which is within a folder called javascript, which is itself within a folder called clientside, in a folder called webdev within the website www.greggriffiths.org. We can therefore use this information to print out the path to the current page from the top using the following Pseudo Code :

Split the current URL into its constituent folders.
For each constituent folder
    Create a link 'object' for each with appropriate text.
Next Folder
Combine all these' objects' together using a seperator to form a single string.
Print out the string.

So, how do we implement this Pseudo Code in Javascript ? We can get the current URL by getting the value of document.location, we can then use the Javascript split function to produce an array of the constituent folder names - although this will also contain elements related to the protocol part of the URL, in this case http://, in this example we will deal with these later, but you could remove them before you do the split. Thus we have the following code :

var constituentFolders = new Array();
var currentURL = document.location.toString();
constituentFolders=currentURL.split("/");

Now that we have this, we need to create the link for each 'element' starting with the root of our site, and we will append each completed link to a string so that we can print it out later. However, we need to consider two things at this point, firstly, we need to avoid the elements relating to the protocol of the URL - as discussed earlier - and secondly that we need to build the links correctly. To create the link elements I've written a seperate function to build up a the relative part of the link depending on a parameter, which indicates how far down in the site we are :

function buildDepth(iterations)
{
    var iterations=iterations-3;
    var depthStr="";
    for (i=0;i<iterations;i++)
    {
        depthStr=depthStr + "../";
    }
    return depthStr;
}

We can use this in conjunction with another loop to produce the breadcrumb trail that we need, note here that we are not starting the processing at the first element of the array, as this contains the protocol component of the URL, if you have removed this - perhaps using a substring or similar function, then you loop will need to start at a different point.

var outputStr="";
for (count=2;count<(constituentFolders.length-1);count++)
{
    outputStr=outputStr + " : <a href='" + buildDepth((constituentFolders.length-count)+1) + "index.html'>" + constituentFolders[count] + "</a>";
}
document.write(outputStr);

Thus we have the complete code for our simple breadcrumb trail in Javascript as follows :

function buildDepth(iterations)
{
    var iterations=iterations-3;
    var depthStr="";
    for (i=0;i<iterations;i++)
    {
        depthStr=depthStr + "../";
    }
    return depthStr;
}
function buildBreadCrumbTrail()
{
    var constituentFolders = new Array();
    var currentURL = document.location.toString();
    constituentFolders=currentURL.split("/");
    var outputStr="";
    for (count=2;count<(constituentFolders.length-1);count++)
    {
        outputStr=outputStr + " : <a href='" + buildDepth((constituentFolders.length-count)+1) + "index.html'>" + constituentFolders[count] + "</a>";
    }
    document.write(outputStr);
}

A fully working demo of this approach is also available.

What additional functionality could we provide to this function ? I offer the following suggestions :

If you wish to create this navigation trail on the server side, using a Server Side Include (SSI), or other Server Side Scripting language such as Perl, PHP, ASP or JSP, then you can simple follow the pseudo code provided here and convert it into the relevant language.

For more information on the breadcrumbs concept in general or how to implement it in a variety of ways, try a search engine such as Google.

Website Designed by Adservio Consulting      Bookmark and Share Valid HTML 4.01 Strict    Valid CSS!    Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0