Automatic Breadcrumbs | JavaScriptSource

Automatic Breadcrumbs

Justin Whitford Oct 5, 2007


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.


  • 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


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


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


Paste this code into the BODY section of your HTML document

Leave a Response


Hello .. I would like to know how can I use of the autoBreadcrumbs.js to show page navigation within my website which is in my computer folder and it is not published . I use of this code : the problem is that when I use of this javascript ,it shows all the folders route that website folder is placed and it does not show the page navigation for example it shows: home » » Users » Asana » Desktop » MIA » my project_new » CSS3_photo_dark » CSS3_photo_dark » and the last one(Asana Neishabouri) is the title of all pages which I have. I am looking for your kind reply. Any help would be much appreciated. Thanks

Asana Jan 12, 2014

Your question is beyond the scope of these comments. You will need to post it over on [a href=""]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

I can't seem to get the autobreadcrumbs to work. It could be the path to the home site. I haved changing it and still no result.[br /][br /]Please some advice.

John Oct 25, 2008

this script is amazing, very easy to implement and understandable. The overall site is very help full.. Great efforts. Thank u so much........[br /]Bhaskar

bhaskar Oct 7, 2008

This is great!

jojo19 Apr 2, 2008