[the_pm]

A half-year ago, I tasked myself with creating a script that could use the folder structure of a site to create breadcrumbs (a path of links that leads to different levels of a site, based on the location of a given page) automatically. I did this in JavaScript because originally the script was to be released within a CBT system that needed to be packaged as a download and/or delivered on a CD. This meant no server technologies could be employed.

I created a script that served the needs of the CBT system well, but I wanted to see if I could "universalize" it, make it generic and viable for any site, online or off. I spent the next half-year tweaking it a little here and there until everything fell into place. The final touch just went into the script - handling jump links within the breadcrumbs.

The neatest part about this script is that it encourages site authors to use naming conventions that are friendly toward search engines. Once the author has created this friendly and fairly intuitive folder/file structure, placing the breadcrumbs into the site literally takes seconds. It is extremely easy to use, and the script itself is not too difficult to modify either.

A word of caution: JavaScript is an optional browser technology. While the vast majority of Internet users have this technology available and enabled, this breadcrumbs script should not be used as a replacement for primary site navigation. It should complement it.

Here is the script for your scrutiny and use:

---

Download the script without line-by-line notes - Best for live site integration.

Download the script including line-by-line notes - Best for examining, learning from and adding to the markup.

Live Demo

---

I will post the live version within this article in a moment.

Enjoy the script, and use it responsibly!

[the_pm]

Dec. 3, 2007 - A few superfluous items were removed from the script in order to make it more versatile. It should now work in sites that have mixed file extensions (utilize more than one file type for page display - .html, .php, .asp, etc.).

The script:

//////////////////////////////////////////////////////////////////////////////
//                         Nifty Breadcrumbs Script                         //
//////////////////////////////////////////////////////////////////////////////
// 
// This is a neat little script that takes your site's file/folder structure
// and converts it into breadcrumbs. As an added bonus, it forces you to
// create a structure that is optimal for search engines to index and rank!
//
// CONTRIBUTORS:
//
// Original Creator:
//     Paul Hirsch
//     www.paulhirsch.com - personal site
//
// Tested by:
//     International Web Developers Network (IWDN)
//     www.iwdn.net - home page
//     www.iwdn.net/index.php - forums/community where testing took place
//
// Other Contributors:
//
//     [INSERT YOUR NAME AND BRIEF DESCRIPTION OF YOUR CONTRIBUTION HERE]
//
// VERSIONS:
//
// 1.2
//     - Removed all requirements for a file extension to be set.
//     - Folder roots have been eliminated.  Now, when visitors step up the
//       breadcrumbs, they are taken to the parent folder via "../" only.
//     - Removed the script portion that parses the jumplink octothorpe. It
//       wasn't really doing anything all that useful.
//     - Updated instructions.  The script is now much easier to use!
//
// 1.1
//     - A little code cleanup.  Double quotes replaced with single quotes,
//       escaped characters unescaped.
//     - Word separators (underscore, hyphen, etc.) are now user-declared.
//     - Custom word replacement now available.  Use your own words in place
//       of your folder/file names.
// 1.0
//     - Original breadcrumbs script released.
//
// INSTRUCTIONS:
//
// 1.  Create your site structure using folders and files with useful names.
//     You may choose any character you'd like to replace spaces in your
//     URLs.  I recommend using underscores (as in the example below), but
//     this script will allow you to specify any single character you'd like
//     to be the replacement for spaces.  If you use something other than
//     underscores, you will need to make a change in the variables section.
//
//     EXAMPLE: http://www.squid.com/My_Pet_Squid/Meet_Rocky.html shows good
//     name choices to describe an area of content and the contents of a page.
//    
//     Alternatively, you can setup mod_rewrite via your .htaccess file to
//     create friendly URLs such as the one above.
//
// 2.  Fill in the settings for the variables in the next section of this
//     script.  They should be pretty self-explanatory.
//
// 3.  Add the following to your site wherever you want your breadcrumbs
//     to appear (change the path to point to wherever you put this script):
//
//     <div id="breadcrumbs"></div>
//     <script type="text/javascript" src="path/to/breadcrumbs.js"></script>
//
// LICENSE:
//
// This script is protected under General Public License (GPL).  Feel free to
// redistribute this script, so long as you do not alter any of the contents
// specifying authorship.  If you add to or modify this script, you may add
// your name to the "Other Contributors" list at the top of this script.  As
// a courtesy, please email me and let me know how you've improved my script!
// You may not profit from the direct sale of this script.  You may use this
// script in commercial endeavors however (i.e. as part of a commercial site).
//
// Email me here: http://www.paulhirsch.com/contact_me.php
//
// Copyright 2006, Paul Hirsch. All rights specified herein and within GPL
// documentation: http://www.gnu.org/licenses/gpl.txt
//
//////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////
// Change the following variables as instructed                             //
//////////////////////////////////////////////////////////////////////////////

// Enter your domain name here, 
var url = "ex.paulhirsch.com";

// Enter the word you want to use to describe the home page of your site
var home = "Home";

// Enter the character(s) you want to use to separate your breadbrumbs
var divide = "&raquo;";

// Enter text you'd like to see.  You can make this blank as well - "";
var pre = "You are here :: ";

// Enter the character that replaces spaces in your URL (i.e. - or _ or %20)
var sp = "_";

// Want to replace any folder names with custom names of your own?  Create
// replacement pairs in the following format: swap[i] = 'Old Words|New Words';
swap = new Array(); // Don't touch this line!
// Remove comments from swap array variables below to put them into use.
// Create additional replacement items by increasing the array number [i] as
// you add more lines.

swap[0] = 'Replace Me|Different Text';
// swap[1] = 'Replace Me|My Replacement';
// etc.

//////////////////////////////////////////////////////////////////////////////
// DO NOT TOUCH ANYTHING BELOW THIS LINE                                    //
// unless you know damned well what you're doing!                           //
//////////////////////////////////////////////////////////////////////////////

divide = ' ' + divide + ' ';
var a = '' + window.location;
a = a.substring(0,a.lastIndexOf('.'));
var b, code, left, x, y = '';
var foo = '';

left = a.lastIndexOf("/");

if (a.substring(a.lastIndexOf('/')) == '/') {
	a = a + root;
}

b = a.substring(left+1);
b = b.replace(new RegExp(sp, 'g'),' ');

code = divide + b;
b = '/' + b;
b = b.replace(/ /g,sp);

a = a.replace(b,'');

if (a.substring(left-1) != '/') {
	do  {
		left = a.lastIndexOf('/');
		b = a.substring(left+1);
		b = b.replace(new RegExp(sp, 'g'),' ');

		code = divide + '<a href="' + foo + '">' + b + '</a>' + code;
		foo = '../' + foo;
		b = '/' + b;
		b = b.replace(/ /g,sp);

		a = a.replace(b,'');
	} while (a.substring(left-1) != '/');
}

code = code.replace(url,home);
code = (code.substring(code.indexOf('<')));
code = pre + code;

for (i=0 ; i<swap.length ; i++) {
	x = swap[i].substr(0,swap[i].lastIndexOf('|'));
	y = swap[i].substr(swap[i].lastIndexOf('|')+1);
	code = code.replace(new RegExp(x, "g"),y);
}

document.getElementById('breadcrumbs').innerHTML = code;

[the_pm]

This script has been updated with a couple new features

// 1.1
// - A little code cleanup. Double quotes replaced with single quotes,
// escaped characters unescaped.
// - Word separators (underscore, hyphen, etc.) are now user-declared.
// - Custom word replacement now available. Use your own words in place
// of your folder/file names.

[the_pm]

I forgot to call out the update

// 1.2
// - Removed all requirements for a file extension to be set.
// - Folder roots have been eliminated. Now, when visitors step up the
// breadcrumbs, they are taken to the parent folder via "../" only.
// - Removed the script portion that parses the jumplink octothorpe. It
// wasn't really doing anything all that useful.
// - Updated instructions. The script is now much easier to use!

[lilnOte]

thank you for the code.
you are so cOoL!

[harrisandreson]

I am of the opinion that breadcrumb is a visual representation of the path to the current page. The core purpose is to give users a way of keeping track of their location within a website. This technique 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.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).

here is the code of that
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\>→\<\/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);
}

If this is going to help you then kindly e-mail me on :harrisandreson@gmail.com