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

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


<!– End of breadcrumb –>

<div class=”column_inner”>

  • 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.)
  • Customize the html code for each page by replacing the example links with your own.

Dynamic Breadcrumb Navigation

Download the dynamic breadcrumb module here.



Submit a Comment