breadcrumbs in html using JavaScript and css

breadcrumbs in html using JavaScript and css

JavaScript

<script type="text/javascript">
function breadcrumbs() {

  sURL = new String;
  bits = new Object;
  var x = 0;
  var stop = 0;
  var output = "<div class=topnav><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);
  document.write(output+ "text1" +" "+"»"+" "+ "text2");
  document.write("</div>");
  }
</script>

CSS

<style>
.topnav { 
  font-size: 0.8em;
  color: #000;
  background-color: #FFCF29;
  border: 1px #00009C solid;
  padding: 0.5em;
}

</style>

JS to call a function to appear breadcumbs where you need.

<script type="text/javascript">


  breadcrumbs();


</script>