| home / js / scripts / breadcrumbs |
|
|
|
A breadcrumb is a navigational tool used to display the path to the current page. There are three types of breadcrumbs: path, attribute, and location. The path breadcrumb displays the actual route taken by the user to reach the current page. The attribute breadcrumb shows several different routes to the current page. The location breadcrumb displays the route from the home page to the current page, no matter how the user got there. Of these, the most popular method used is the location breadcrumb.
There are several different ways of displaying a breadcrumb. At WebReference, we use a basic trail created by hand with HTML code which is displayed at the top and bottom of this page. The code used is:
<a href="/">home</a> / <a href="/js/">js</a> / <a href="/js/scripts/">scripts</a> / <a href="/js/scripts/breadcrumbs/">breadcrumbs</a>
JavaScript can also be used to display the breadcrumb trail on the current page. Once the code is added to the page, 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.
Of the many scripts available for creating breadcrumbs, we'll look at one created by Justin Whitford.
The script is as follows:
function breadcrumbs(){
sURL = new String;
bits = new Object;
var x = 0;
var stop = 0;
var output = "<a href=\"/\">Home</a> > ";
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> > ";
}
document.write(output + document.title);
}
It prints out a breadcrumb trail that looks like this:
The pointer between each link, ">", can be changed to something else, if desired. You will need to change the script on the red lines above. The pointer is shown in blue. If you want to change it to a double pointer, "»", change the first line displayed in red to:
var output = "<a href=\"/\">Home</a> » ";
Then change the next line displayed in red to:
output += bits[i] + "/\">" + bits[i] + " » ";
The breadcrumb trail would now look like this:
You can experiment with different pointers. You can also get rid of the extra
spaces between the links by removing the non-beaking space characters ( )
on each side of the pointer.
The great part about this script is that it doesn't need to be configured. It will work exactly as it is. Click the "Select Script" button below and copy the script into a blank page. Be sure to use a text editor such as Notepad or NoteTab. Save it as a file called "crumb.js".
Next, you will need to link your Web page to the JavaScript file. In the head section of the Web page you want to display the breadcrumb trail — between the <head></head> tags, insert a link that looks like this: <script language="JavaScript" src="crumb.js"></script>. Be sure there are no spaces or code between the opening and closing <script> tags as this may cause the loading of the script to fail.
Finally, you will need to call the script. Place the following code where you want the breadcrumbs to be displayed:
<script language="JavaScript"> <!-- breadcrumbs(); --> </script>
That's it! Now, whenever the file is displayed, it will show the navigation trail from the home page to the current page. If you plan to use breadcrumbs, a good design technique is to use them through your entire site. If you run into any diffulties with this or other scripts, check out our JavaScript section and our forum.
| home / js / scripts / breadcrumbs |
| ||||||||||||||||||||
Created: January 31, 2005
URL: http://webreference.com/js/scripts/breadcrumbs/
