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


The homepage of my site is actually in a sub-directory called ConeService, how can I modify the script to work well? Thanks a lot.

Edivaldo Souza Jan 16, 2016

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

  • On-demand Event Event Date: May 16, 2017 Developers who use popular JavaScript frameworks like React to build user interfaces often have to create components to build the interface. Building components is time consuming, has integration and maintenance risks, and worst of all, distracts them from the task at hand — actually building the app. Watch this webinar to see how to quickly and easily add more than 115 professionally supported and tested components from Sencha to your React apps. In this …