• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
JavaScriptSource

JavaScriptSource

Search 5,000+ Free JavaScript Snippets

  • Home
  • Browse Snippets
    • Addon
    • Ajax
    • Buttons
    • Cookies
    • CSS
    • Featured
    • Forms
    • Games
    • Generators
    • Image Effects
    • Math Related
    • Miscellaneous
    • Multimedia
    • Navigation
    • Page Details
    • Passwords
    • Text Effects
    • Time & Date
    • User Details
Home / Navigation / Automatic Breadcrumbs

Automatic Breadcrumbs

General

This script will automatically build a “breadcrumb” navigational 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.

Notes

  • Created by: Justin Whitford
  • Web Site: http://www.whitford.id.au/
  • Posted: October 5, 2007
  • It wraps the entire breadcrumb trail in a CSS class called “topnav”. You can style this however you like, or you could modify the script to change ‘topnav’ to any CSS class name you want.
  • It names the base directory site “home”. You can modify the script to change the name to something else.
  • It assumes that the homepage of the site is in the root directory of the Web server. If the homepage of your site is actually in a sub-directory, you would need to seriously modify the script.
  • You need to have an index.htm (or equivalent) file in each directory or the user will experience 403 errors.
  • It does not work in frames.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: autoBreadcrumbs.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascriptsource.com
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">home » “;

  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 += “” + bits[i] + ” » “;
  }
  document.write(output + document.title);
  document.write(“</div>“);
  }

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

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

Head

Paste this code into the HEAD section of your HTML document.

<script type=”text/javascript” src=”autoBreadcrumbs.js”></script>

Body

Paste this code into the BODY section of your HTML document.

<script type="text/javascript"><![CDATA[
<!--
  breadcrumbs()
//-->

]]></script>

Navigation

Related Snippets:

  • Return the scroll position of the current page
  • Detecting when a visitor has stopped scrolling
  • Smooth Scroll to the Top of the Page With JavaScript
  • Ticker

Primary Sidebar

Popular Posts

Story Generator

IP Grabber – get a users IP address with JavaScript

Simple Calendar

Remove Ads

Astrological Calculator

Copyright © 2025 JavaScriptSource.com

  • About
  • Privacy Policy
  • FAQ
  • Jobs For Developers