Navigation Menu
Alphabetical Listing
Site Contents

Site FAQ
About JSS
JavaScript Forum
JavaScript Tutorial
Friends of JSS

Link to Us
JavaScript Help
Contribute a script
Technology Jobs

Become a Partner

Internet.commerce

Be a Commerce Partner














Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Developer Channel

FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!


Hiermenus Central


Promotions

Free Announcements


Social Bookmark

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

  • 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


CSS

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


Head

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


Body

Paste this code into the BODY section of your HTML document


User Comments

Add a comment, suggestion, or correction
[For questions about usage, consult the Notes tab above or visit the JavaScript forum. Do not include more than two (2) lines of code in your comments. If you have suggestions or corrections, you can submit them to us.]

    
   
       
[optional]
 
[optional]

   

Comments feed Comment Feed RSS 2.0

8. From: John
Whats missing
10/25/2008 08:51:17

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.

Please some advice.

9. From: Lee (Admin)
10/31/2008 12:05:32

Your question is beyond the scope of these comments. You will need to post it over on the JavaScript forum. Thanks!

10. From: bhaskar
10/07/2008 09:40:54

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

7. From: jojo19
04/02/2008 04:55:20

This is great!

5. From: jorge
10/18/2007 03:32:18

very good

1. From: Paul
Automatic Breadcrumbs
10/12/2007 15:18:33

Your Automatic Breadcrumbs script is amazing! I have been wanting to implement a navigational link on my webpages like this for a while. In your notes, you state: "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." Unfortunately, I inherited a website that was built with the homepage in a sub-directory. For me to correct this design would take way to much work (many lower sub webpages). I want to use your script, but do not know how to modify your script.

2. From: Lee (Admin)
10/26/2007 14:18:00

Paul,
You could always ask for help over at the JavaScript Forum. Just see what you can do to start and check with them when you need help or guidance.

6. From: Eddie Woodford
Breadcrumbs- GOOD!!!
10/11/2007 15:21:05

Breadcrombs are an effective way to add navigation to a web site. Amazon.com was one of the first to implement this navigation. It is just a simple way to add navigation. One down side of it is that if you have a vary large site it is easy for the breadcrumbs to add up and cover half the page. Be carfull.

4. From: Wendy Beaulac
Great Script
10/10/2007 15:11:31

Great Script - easy to set up and works great. Thanks so much.

3. From: Jim Watson
I like it... well done
10/08/2007 09:21:35

Thank-you, I found it is simple and easy to install and works well.

Jim


Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.