Information Resources & Technology (IRT)–

Breadcrumbs Links Files

This set of exercises is dependent on completion of the New Topic Subdirectory tutorial. It discusses editing links in your Breadcrumbs area. Links in Left Navigation and Page Body are discussed elsewhere. Breadcrumbs links are different from body links in two related ways:

  1. They are kept in special, separate files called server-side includes and
  2. The links must always use the full or "absolute" URL of the linked page, beginning "http://" or "https://"

Includes are snippets of HTML saved in separate file. Special coding in the page file causes the server to parse, or pull the code, into the flow of HTML delivered to the browser. The effect is that when updating the include to change a link every page that uses the include changes.

What are they?

A trail of links under the tabs (or under the header) are called breadcrumbs because they lead the user back to the Home page. The last link in the chain represents the parent topic home page for the page in view. Here is a typical progression through topics in Stanford Medicine sites:

Like the left navigation links, bread crumbs links are kept in server-side include (SSI) files, one for each major topic, usually in a near-by includes directory.

Breadcrumbs includes files also contain a snippet of JavaScript code used to set a tab highlight.

Watch Demo

Step 1: Edit your new topic breadcrumbs

  1. Begin with your new topic home page (index.html) open in Dreamweaver
    • Find and open your new topic directory (e.g. "my_project") in the Local files list
    • Find and open index.html inside this folder
  2. Click on the breadcrumbs links; look at the Properties Inspector
  3. Click the Edit button to open the attached breadcrumbs include file
    • Includes files typically live in a nearby folder named "includes"
    • Breadcrumbs are usually in the includes folder at the same level as the page file
  4. Select the text of the final link, e.g. "TopicNameHere" (if you duplicated an existing active topic folder, this will be the name of the duplicated topic)
  5. Don't delete; type or paste in the new link name for the topic, e.g. "[your name]'s Project," replacing the original link text

Step 2: Set the highlight tab

This part of the tutorial only applies to sites with tabs

  1. With the breadcrumbs include file still open from Step 1, click the "Split" or "Code" button to reveal the file's HTML code
  2. Scroll to the top of the code; look for code similar to the following (if there is none, copy and paste this code at the very top of the file):
    •   <!-- Optional Tab Highlight Override -->
      <!-- <h5 class="nodisplay">Current Tab: <span id="tabOverride">2</span></h5> -->
      <!-- // End Optional Tab Highlight Override -->
  3. Uncomment the code beginning "<h5" and ending "</h5>" by deleting the "<!--" from the beginning and the "-->" from the end
  4. Change the number in the tabOverride span to that of the tab to highlight, e.g. <span id="tabOverride">2</span> for the second tab, <span id="tabOverride">3</span> for the third, etc.
  5. Click the "Design" button to return to preview mode

Steps 3 & 4: Upload and validate in browser

  1. In Dreamweaver, upload the breadcrumbs include file
    • With the breadcrumbs file open, use the document's File Management button to find the "Put" (or "Check-in") command
  2. Switch to a browser and find your new topic's home page; if already viewing it, Reload/Refresh
    • You should see your new link text in the breadcrumbs
    • You should see a tab highlighted
    • If not, make sure that the edited breadcrumbs file is uploaded, and that this is the breadcrumbs file for the new topic and not some other

You can leave the topic home (index.html) file open for the next tutorial, or close it and resume later.

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: