Implementing a Website in Cascading Style Sheets (CSS)

Open to All

The California standards are well-considered.

The templates are great and very adjustable.

Available for you to learn from, borrow from and use.

Right Column

Breadcrumb Navigation

http://www.webtools.ca.gov/Downloads/Breadcrumb_Navigation/default.asp

• Leaving a breadcrumb path to find your way home...
• Always use them or never use them
  • Consistency is a virtue - it's what makes a website a website
• Download at: http://www.webtools.ca.gov/Downloads/zip/breadcrumb_module.zip

1. Download the files and unzip
2. Copy the HTML in breadcrumb.html to your template.
   • Right after '<div id="middle_column">' (near line 164):
     
     <div id="middle_column">
     
     <!-- Begin breadcrumb -->
     <div class="breadcrumbs">
         <a href="/">Home</a> <img src="images/ca_department/bullet_blue.gif" alt="" />
         <a href="#">Category</a> <img src="images/ca_department/bullet_blue.gif" alt="" />
         <strong>Title of this page</strong>
     </div>
     <!-- End of breadcrumb -->
     
     <div class="column_inner">
3. Copy the code in breadcrumb.css to /css/ca_department.css.
4. Customize the links in the HTML.

• 'Dynamic' Version also online at http://www.webtools.ca.gov/Downloads/
  • Uses JavaScript
  • Generates hierarchy based on the URL of the page
  • Effectively requires directory structure to match web content, e.g.
    • /index.html
    • /extend_site/index.thml
    • /extend_site/breadcrumbs/index.thml