Breadcrumb navigation

Introduction

One way in which I decided to try and improve navigation around the site was to include what are known as breadcrumbs. This is the method of navigation where a clickable path to the currently viewed file is displayed, such as the one beneath the page header image.

According to Usability News from Witchita State University's Department of Psychology this form of navigation can be useful, especially if it placed beneath the page headings.

Implementation

One of the first sources I found was Justin Whitford's JavaScript code on Evolt. However, when I tried it I ran into a problem. Although it works very well the code simple returns something approaching a directory listing with links. It also depends on the website author having an index.html in each of the directories. After that I decided to write my own.

The Code

What I came up with is...

function breadcrumbs(){

var path = location.pathname;
var dir = new String;
dirhref = new String;

home = '<a href="../index.html">Home</a>';

path = path.replace(/\\/g, "/");

var bits = path.split("/");
dir=bits[bits.length-2];
dirhref = dir.slice(0,1);

switch(dir){
case "optill" :
dir = "Optical Illusions";
break;
case "bristol" :
dir = "Bristol";
break;
case "dad" :
dir = "Dad's Navy Days";
break;
case "th" :
dir = "Terre Haute";
break;
case "qbasic" :
dir = "QBasic";
break;
case "wstory" :
dir = "War Stories";
break;
case "nabris" :
dir = "Bristol's Worldwide";
break;
case "comp" :
dir = "Computers";
break;
case "misc" :
dir = "Miscellany";
break;
case "utils" :
dir = "Utilities";
break;
case "ray" :
dir = "Ray";
break;
}

dirhref = '<a href="' + dirhref + 'ind.htm">' + dir + '</a>';

if (dir=bits[bits.length-1].search("tpcards") > -1){
dirhref = dirhref + ' > <a href="tpcards1.htm">Postcards</a>'
}

document.write(home + " > " + dirhref + " > " + document.title);
}

Dissection

location.pathname is used to obtain the path from the root and the current document name. In this case, /utils/ubcrumbs.htm is returned.

home = '<a href="../index.html">Home</a>'; sets up the home part of the breadcrumbs. The title page for this site is called index.html on all the servers that carry it and when it is written to CD or on a hard drive.

path = path.replace(/\\/g, "/"); is for when the site is on a CD or hard drive. What this code does is replace all the instances of "\" in the path name and changes them to a "/". This is the regular expression form of replace that is capable of changing all the looked for characters in a string.

var bits = path.split("/"); splits the variable "path" at the "/" character and puts them in an array I've named bits.

dir=bits[bits.length-2]; sets the variable "dir" to the the second from last element in the array. The last element in the array is the document file name. The site is only one directory level deep so I'm not worried about the rest of the elements, but if needed they can be easily extracted.

dirhref = dir.slice(0,1); takes the first letter of the directory and puts it in the variable "dirhref". How my site is organised is that each folder begins with a different letter, and the first or home file of the folders is the intitial letter of the folder followed by "ind.htm". For example, this page is in the folder "utils" and the first or home page of that folder is uind.htm. In order to make the link to the first file in each section I need to extract that first letter.

The switch construct is to make some sort of readable form from the directory names. So the folder "dad" contains the files of my fathers' time in the Royal Navy. Hence, the variable "dir" which originally contained "dad" is reassigned to "Dad's Navy Days". Incidentally, the first file in "dad" is dind.htm.

dirhref = '<a href="' + dirhref + 'ind.htm">' + dir + '</a>'; makes the HTML code for the links. This file is in the "utils" folder and the first file in that folder in uind.htm , dirhref originally contains "u", dir originally contained "utils" which was changed to "Utilities" in the switch construct. After this line of code is executed dirhref contains <a href="uind.htm">Utilities</a>

if (dir=bits[bits.length-1].search("tpcards") > -1){
dirhref = dirhref + ' > <a href="tpcards1.htm">Postcards</a>'
}

This is a special case for the Terre Haute postcards section. This hasn't a separate subdirectory but is contined in the Terre Haute directory. What happens here is that the filename is checked for the substring "tpcards" if it contains it then <a href="tpcards1.htm">Postcards</a> is added to the dirhref variable.

document.write(home + " > " + dirhref + " > " + document.title); writes the breadcrumbs to the page. Rather than use the file name, in this case "ubcrumbs.htm", which is pretty meaningless to most people, I used the page title from the HEAD section of the file which is "Breadcrumbs". This is extracted by document.title

Calling the function

The JavaScript function can be called by using any of the standard techniques. Because the code is used on most pages on the site I put the function in the main JS file for the site, brisray.js

The pages have to be told where this file is. This is done by putting <script type="text/javascript" src="../common/brisray.js" language="javascript"></script> in the HEAD section of each page.

Where the breadcrumbs are to appear in the BODY of the page the following code is used...

<script language="JavaScript" type="text/javascript">
<!--
breadcrumbs();
-->
</script>

Sources

Justin Whitford's JavaScript code on Evolt
Object: Document - Document objects and properties
Parsing the Querystring with JavaScript - Location and document objects and properties
Strings in JavaScript - String functions
Usability News from Witchita State University's Department of Psychology
Using Regular Expressions with JavaScript and ECMAScript - Regular expressions

This page created 3rd July 2005, last modified 11th July 2009


GoStats stats counter