WebTools branding banner, with hammer and wrench tools in background

Breadcrumb 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.

Standard Breadcrumb Navigation

This module adds the breadcrumb section at the top of the main content area.

  1. Download Breadcrumb Navigation - Standard (zip)
  2. Open the file 'breadcrumb.html' in a text editor. Copy its contents and paste it into CAtemplate.html line 164. The resulting code should look like:

    <div id="middle_column">
    <!-- Begin breadcrumb -->
    <div class="breadcrumbs">
    <a href="/">Home</a> <img src="images/bullet_blue.gif" alt="" /> <a href="#">Category</a> <img src="images/bullet_blue.gif" alt="" /> <strong>Title of this page</strong>
    </div>
    <!-- End of breadcrumb -->
    <div class="column_inner">
  3. Open the file 'breadcrumb.css' in a text editor. Copy its contents and paste it into /css/ca_department.css. Skip this step if you upgraded from version 1.0 and left the breadcrumbs style in the CSS (step 3 in the upgrade.)
  4. Customize the html code for each page by replacing the example links with your own.

Dynamic Breadcrumb Navigation (updated)

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.

UPDATE: The previous version of the breadcrumbs JS displayed special characters when using underscores in the file and folder names in combination with improperly formed URLs. A part of IIS's attempt to correct an incorrectly formed URL  is encoding the URL, resulting in the underscore being encoded. The breadcrumb script has been corrected to always place a / on the end of URLs pointing to a folder, rather than a page within a folder.  Example:

  • Improperly formed URL: http://www.webtools.ca.gov/Downloads
  • Properly formed URL: http://www.webtools.ca.gov/Downloads/
To update your code download the zip file below.

Instructions

  1. Download Breadcrumb Navigation - Dynamic (zip - includes recently updated JS file) View update help file. For more information on this fix visit the Internet Development Forum.
  2. Open the file 'breadcrumb.html' in a text editor. Copy its contents and paste it into CAtemplate.html, line 164. The resulting code should look like:

    <div id="middle_column">
    <!-- Begin breadcrumb -->
    <div class="breadcrumbs" id="breadcrumb_dynamic">
    </div>
    <!-- End of breadcrumb -->
    <div class="column_inner">
  3. Open the file 'breadcrumb.css' in a text editor. Copy its contents and paste it into /css/ca_department.css. Copy its contents and paste it into /css/ca_department.css. Skip this step if you upgraded from version 1.0 and left the breadcrumbs style in the CSS (step 3 in the upgrade.)
  4. Open the file 'breadcrumb.js' in a text editor. Copy its contents and paste it into /javascript/department.js.