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


this script is amazing, very easy to implement...thanks a lot...

Praveen Sep 30, 2015

Hi! Your script works well! I have a problem though, when I'm on the current page, it displays the page title which is great. However, if I'm not on that page it will use the href name instead. For example: Home marketing-services product-and-service Identity Is there anyway to add the page title rather than the href names? Thank you.

Richard Aug 8, 2015

Did everything to a tee...even the different things it said with the Paste this code into your external CSS file or in the

Top White Papers and Webcasts

  • Anthony Christie, the Chief Marketing Officer for Level Communications, is responsible for customer experience, worldwide marketing and product management. In this informative asset, he shares his insights into why a private network connection to cloud-bases applications is the right decision for your enterprise. Download now to find out more.

  • Enterprises are increasingly looking to platform as a service (PaaS) to lower their costs and speed their time to market for new applications. Developing, deploying, and managing applications in the cloud eliminates the time and expense of managing a physical infrastructure to support them. PaaS offerings must deliver additional long-term benefits, such as a lower total cost of ownership (TCO), rapid scalability, and ease of integration, all while providing robust security and availability. This report …