Creating a Breadcrumb Trail

In large web sites, it is good practice to let the visitor know where they are at any point in time in the site's hierarchy. Say, for instance, that the site is one for a Garden Center, you may have different sections of the site for specific areas of interest - such as plants, gardening equipment, sheds, etc., and within each of these sections there may be a large choice of sub-sections.

As the visitor clicks on links to descend deeper into the site, it can become difficult for them to know where they are and how to get back to a higher level, so it helps to give them a visual reference to see where they are and also to offer the facility for them to click back a level.

This navigation method is called a breadcrumb trail - or breadcrumb for short. Just as the name suggests, you leave behind you a trail that will help you find your way back home. The great thing about breadcrumbs is that the visitor can click on any previous level as each level in the trail is an active hyperlink.

In Freeway, you can make a breadcrumb trail by using the Navigation Bar Action. The breadcrumb is the basic function of the Action, but there is a lot more besides which can be done. For the purposes of this article, we'll concentrate only on the breadcrumb - if you want to know about the other features of the Navigation Bar Action (such as dropdown menus which can be made to display when each level of the breadcrumb is mouseovered) you can read about it in the Freeway 5 Reference manual (available free from http://www.softpress.com/support/usermanuals.php), where the Navigation Bar Action section starts on page 364.

To create a breadcrumb trail, you will first need to establish a hierarchy of pages within separate page folders. This is because for a breadcrumb to work usefully, each level needs to be defined as groups of pages kept together in logical page folders.

See the screenshot of Freeway's Site Panel below in our sample site. You can see there is a Site Folder (called "Oxford Supergardens") which contains various other page folders. At the root level of the Site Folder is the "home" page (the first level). Also in this first level there are three page folders ("plants", "gardeningequipment" and "sheds"), which make up the second level. You can also see that there are sub-folders within each of the three second-level page folders (in the "plants" page folder you can see sub-folders for "annuals", "perennials", "shrubs', "herbs" and "trees", which make up the third level) and that the page currently displaying in Freeway is a page called "thyme" which is in the "herbs" sub-folder with other herb pages (the fourth level).



You can tell which level any particular page folder or page is at by seeing how many levels it is indented to the right in the Site Panel. Above you can see that, in our sample site, "Oxford Supergardens" (the Site Folder) is not indented, the page folders for "plants", "gardeningequipment" and "sheds" (the second level) are indented one level, and the page folders for "annuals", "perennials", "shrubs", "herbs" and "trees" (the third level) are indented two levels. You can also see that the pages "herbs", "parsley", "sage", "rosemary" and "thyme" are indented one more level (immediately below "herbs") to indicate that they reside in the "herbs" page folder.

The other important thing to note about the structure of a site when using breadcrumbs is that you need to establish which specific page will be displayed if you click back a level on the links in the breadcrumb trail. This is why there is a "generic" herbs page in the Herbs page folder, as this is the page which the breadcrumb trail link to "herbs" will display when clicked. There are three options which govern which page will display when a link is clicked on in the breadcrumb:
  1. The page has "index.html" set as its "Title" in the Inspector.
  2. The page has "home.html" set as its "Title" in the Inspector.
  3. The page is the first one listed in that page folder as displayed in the Site Panel.
Note that, although you may have been told that you can only have one "index.html" (or "home.html") page in a web site, you can actually have one per page folder.

Once the hierarchy is in place, you can now apply the Navigation Bar Action. This is perhaps best used on a Master page, as it will then appear on every page created from that Master. To apply the Action, go to Insert>Action item (this will place the Action item on the page), then open the Actions palette to see the options available. You will need to resize and position the Action item on the page to suit your requirements.

If the "thyme" page is selected in our sample site and the file is previewed in a browser, the Navigation Bar Action item will now display the breadcrumb trail as shown in the screenshot below. Note that this is the default styling of the Navigation Bar Action.



Most of the options in the Navigation Bar Action determine the appearance of the font, size, etc., of the breadcrumb as it will be displayed on the page. There are, however, two options which require further explanation.

First is the "Home Title" field. This determines the name for the root level of the site - if your home page is called "Welcome", then you can choose to enter "Welcome" in the Home Title field.

If the opening page of your site is a simple portal or just an introductory page, you may want to use the Navigation Bar Action so that the visitor isn't offered a link back to that page - if this is the case, remove the Action item from this page only. This page will still be the root level of the breadcrumb, but it won't be an active hyperlink, so you can use "You are here" (for instance) in the Home Title field so that the breadcrumb links start at the second level. More options are achievable by using multiple Master pages.

The other option which needs further explanation is the Arrow popup, which is greyed out by default. If you want to change the arrow colors (the ones which appear between each breadcrumb level) you can choose the color you want from the list in the Appearance popup. If, however, you want to use your own arrow (or other) graphics, you can choose "Custom" from the Appearance popup and then select the file you want to use in the Arrow popup (which will now be active).

There is another option in the Navigation Bar Action palette's Appearance popup called "Select Folder" this can be used if you have a folder of images you like to use regularly and you want to see that folder without the need to navigate to it.