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.
- Download Breadcrumb Navigation – Standard (ZIP)
- 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:
<!– Begin breadcrumb –>
<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 –>
- 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.