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

  • Complex hybrid environments can make it difficult to track interdependencies, increasing the risk of disrupting critical business services. In this white paper by EMA, you'll learn how application discovery and dependency mapping can help you: Meet granular targets for availability, cost, and time-to-revenue for cloud services. Accelerate mean time to repair (MTTR) while communicating better with stakeholders. Manage even the most complex hybrid environments more efficiently and effectively Understand the …

  • Rocket Mobile® for IBM i is an enterprise mobile application development and deployment platform for customers who rely on the IBM i system. Rocket Mobile for IBM i enables customers to leave proven applications in-place and rapidly repurpose them into new managed and secure mobile applications. Fast, easy creation of mobile, web, and hybrid mobile applications that deploy to any iOS, Android, or Windows mobile phone or tablet Built-in integration for seamless repurposing of existing IBM i applications …