(This is a tutorial/white paper I just published on IWDN. I'm recreating it here verbatim)

---

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 (http://ex.paulhirsch.com/Breadcrumbs/breadcrumbs_wo_notes.js) - Best for live site integration.

Download the script including line-by-line notes (http://ex.paulhirsch.com/Breadcrumbs/breadcrumbs_w_notes.js) - Best for examining, learning from and adding to the markup.

Live Demo (http://ex.paulhirsch.com/Breadcrumbs/)

---

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

Enjoy the script, and use it responsibly!

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
//
// 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]
//
// INSTRUCTIONS:
//
// 1. Create your site structure using folders and files with useful names.
// Use underscores to signify spaces when naming everything.
//
// 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 to create friendly URLs such
// as the one above.
//
// Every folder *must* have a default document in it (such as index.html
// or default.asp or whatever your host specifies). You can also use
// 301/302 redirection to push the folder root to one of the pages within
// that folder. This will replace an index page, if you don't wish to
// have one.
//
// 1a. If you want to use something other than underscores for spaces (such
// as hyphens), you can make edits to the actual script to recognize
// your preference. A set of prewritten code lines have been inserted
// below and commented out. Feel free to use them, or to create your
// own based on them.
//
// 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 = "example.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 breadcrumbs
var divide = "&raquo;";

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

// Enter the extension you use for your pages
var ext = ".html";

// Enter the default file name you use for the root file of your folders
var root = "index";

//////////////////////////////////////////////////////////////////////////////
// DO NOT TOUCH ANYTHING BELOW THIS LINE //
// unless done in accordance with the instructions at the top of the page. //
//////////////////////////////////////////////////////////////////////////////

divide = " " + divide + " ";
var a = "" + window.location;
var b = "";
var bar = divide + root;
var code = "";
var foo = root + ext;
var left = "";

a = a.replace(ext,"");
left = a.lastIndexOf("/");

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

b = a.substring(left+1);
b = b.replace(/_/g," ");
b = b.replace(/#/g,divide);

// Alternative spacer: hyphen. Remove comment tags in the next line to activate
// b = b.replace(/-/g," ");

code = divide + b;
b = "/" + b
b = b.replace(divide,"#");
b = b.replace(/ /g,"_");

// Alternative spacer: hyphen. Remove comment tags in the next line to activate
// b = b.replace(/ /g,"-");

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

if (a.substring(left-1) != "/") {
do {
left = a.lastIndexOf("/");
b = a.substring(left+1);
b = b.replace(/_/g," ");

// Alternative spacer: hyphen. Remove comment tags in the next line to activate
// b = b.replace(/-/g," ");

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

// Alternative spacer: hyphen. Remove comment tags in the next line to activate
// b = b.replace(/ /g,"-");

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

code = code.replace(url,home);
code = code.replace(bar,"");
code = (code.substring(code.indexOf("<")));
code = pre + code;
document.getElementById('breadcrumbs').innerHTML = code;