State Template Breadcrumbs Navigation

Breadcrumb navigation, otherwise known as “location” navigation is a useful navigation string that shows the location of the current page in context of the website information structure. The name breadcrumb comes from the concept of leaving breadcrumbs in the forest in order to find the way back home.

Breadcrumb navigation should be a global characteristic—that is, a site would either provide breadcrumb navigation on its pages or not. When ever breadcrumbs are used they should be used consistently. Breadcrumbs should be positioned directly under the banner area, above the main content area.

Dynamic Breadcrumb Navigation

In this dynamic version, the breadcrumb section is generated automatically based on the URL of the page. Links are created for the parent folders in which the file is located. The filename is displayed in bold. You should create default pages (usually index.html or default.htm) in each folder, in order for the links to work.

  • Properly formed URL:


ZIP File Includes:

  • breadcrumbs.html
  • instructions_breadcrumbs.txt
  • JavaScript folder (1 file)

Copy the contents of the javascript folder to the javascript folder of your site.

Copy the HTML code from breadcrumbs.html to your webpage where you want the breadcrumbs to appear.

Copy this line to the head of your webpages. It should appear after the link to scripts.js.
<script type="text/javascript" src="/javascript/breadcrumbs.js"></script>



Submit a Comment