Celtnet Information:

A breadcrumb is a visual representation of the path to the current page. The purpose is to give users a way of keeping track of their location within a website. The technique actually derives its name from the bread crumb trail left by Hansel and Gretel to prevent themselves from getting lost in the forest, as described in the popular fairy tale recorded by the brothers Grimm.

As above, breadcrumbs typically appear horizontally near the top of a web-page providing links back either through each previous page in the link trail of through the directory hierarchy in which the file is found.

Types of Breadcrumb Trails:

There are three main types of breadcrumb trails that can be classified as:

Path Breadcrumbs

This type of breadcrumb displays the actual route taken by the user to reach the current page.

Attribute Breadcrumbs

This type of breadcrumb displays information that categorizes the current page and may also provide several routes by which the current page can be reached.

Location Breadcrumbs

This is by far the commonest form of breadcrumb (and is the one employed on this site) and displays the directory structure from the home page to the current page. What it actually displays are the directories that lie between the home page and the current page. Any links created will be links to directories rather than files and you will need to place an index.html file in each directory to re-direct the user to an useful page (but more on this below).

Creating Breadcrumbs:

The easiest way to create a breadcrumb is by direct encoding in HTML. For example the HTML breadcrumb for this page would be:

Hard-coding the breadcrumb trail is fine if you have a small site with few nested directories. However, adding the breadcrumb trail by hand starts to become rather tedious if you have more than about 20 pages. As a result I use a JavaScript breadcrumb generation system for this website. Below I'll show you precisely how this was done and I'll give you all the code and all the techniques you need to use this breadcrumb trail on your own website.

JavaScript, like many other technologies (such as PERL and PHP) can be used to create a breadcrumb trail for your website. In fact, the script you need is fairly simple and uses JavaScript's in-built knowledge of a website's location on your server. Once this code is uploaded to your server and some link code is added to your website it will automatically determine the navigational trail for the breadcrumbs. Also, it won't need to be changed if the page is relocated in a different directory or on another server.

The workhorse of this method for displaying breadcrumbs is the following script:

function breadcrumbs(home,name){
  sURL = new String;
  bits = new Object;
  var x = 0;
  var stop = 0;
  var output = "<b><font color=\"darkgreen\">You are here:\<\/font\></b>           
             <a href=\"http\:\/\/"+home+"\">Home</a> \<b\>&rarr;\<\/b\>  ";
  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>  \<b\>→\<\/b\>  ";
  }
  document.write(output + name);
}

This generates a single line that prints a breadcrumb trail which looks like this:

  You are here:  Home→Info→breadcrumb

I've used a right arrow (&rarr) symbol [coded by →] as a delimiter. You could change it to anything you want (the > greater than sign is common). But, please don't use the 'double pointer' (») symbol as this is an end quotation mark in some languages. This can be changed in lines 6 and 26 in the code above (just look for the → entry in the script).

The code itself is available below:

Simply copy and paste this code into a text editor (notepad, BBEdit, Vi or any plain text editor will work. Save the file as crumb.js in plain text format and upload to your website. I normally hold all my JavaScript files in a /js/ directory within my home directory. A great advantage of this script is that it does not need any configuring. All the parameters needed to run the script are supplied by the JavaScript snippet in your HTML file.

Running the Script

Assuming that the script was placed in a /js directory within the home directory of your website and that you saved the JavaScript as crumb.js then you call the script by adding the following line to the <head> block of your HTML:

<script language="JavaScript" src="./js/crumb.js"></script>

Please note that the script is called using a relative path here (but you can use an absolute path if you want). Simply amend the location to the java script file to reflect where it actually is (either in absolute terms or relative to the file calling it).

To generate your breadcrumb simply add this code snippet to your HTML file:

<script language="JavaScript">
<!--
   breadcrumbs('www.celtnet.org.uk/info/info.html','Breadcrumbs');
-->
</script>


The 'breadcrumbs' method requires two inputs. The first of these is the URL of the 'homepage'. I've engineered the script this way so that if you have a very large site each section can have its own home page. The second part of the input is the name of the HTML page that's calling the script. Again this has been done so that an informative name can be given to the user rather than the name of the HTML page itself. Thus, for this page the actual page name is breadcrumb_script but all I wanted to show the user was breadcrumbs.

Essentially that's it! However, as the script presents the user with directories rather than web pages you will need to place a redirecting index.html in each directory. An example of which is given below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head> 

<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Refresh" content="0; url=./info.html">;

<title>Celtnet Information Sitemap Page

</head>
<body>

</body>

The code above simply re-directs any enquiry to the info directory to an info.html page within that directory. You now have all the code available to create your own breadcrumb trail on any web page. If you find this code useful, then please place a link to my website http://www.celtnet.org.uk on your site's links page.

If you enjoyed this page and would like to get more tips, tricks and offers to help you make the most of your most of your web presence please sign up for my Weekly e-mail newsletter. Please note that your details will never be sold and shared with others. You are signing-u for my e-mail only. Click Here to Join