« »

This JavaScript will automatically build a "breadcrumb" navigational JavaScript link to any page on your Web site. This allows your visitors to see exactly where they are on your Web site at an given time. Very easy to implement.

Label: Automatic Breadcrumbs

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
.topnav { 
 	font-size: 0.6em;
  color: #000;
 	background-color: #FFCF29;
 	border: 1px #00009C solid;
 	padding: 0.5em;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="javascript">
<!--
// Created by: Justin Whitford :: http://www.whitford.id.au/

function breadcrumbs() {
  sURL = new String;
  bits = new Object;
  var x = 0;
  var stop = 0;
  var output = "<div class=topnav><a href=/>home</a> &raquo; ";

  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> &raquo; ";
  }
  document.write(output + document.title);
  document.write("</div>");
  }
//-->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script type="text/javascript">
<!--
  breadcrumbs()
//-->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->