Navigation Bar Action

13th of February, 2013

Type of Action: Standalone Action (to use it, either click and hold on the Freeway tool, choose the Action from the list and draw an item on the page OR go to Insert>Action Item and choose the Action from the list).

What the Action can do: This Action lets you do the following:
  • This lets you set up a "breadcrumb trail" which gives site visitors a way to easily see where they currently are in the structure of the site, and also lets them click on any particular level's word to link back to that level.
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.



The screenshot above shows a breadcrumb trail which shows that if you want to go back to a higher level of the site hierarchy you can simply click on any level in the structure because each level 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:
  • The page has "index.html" set as its "Title" in the Inspector.
  • The page has "home.html" set as its "Title" in the Inspector.
  • 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.


  • Home title: 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. Also, if the opening page of your site is a simple portal or just an introductory page, you may want may not want to let visitors 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.
  • Appearance: Choose from different color themes from this popup (the colors relate to the arrows between each level). If you select "Custom Files" you can choose the file you want to use for the arrow graphics in the Arrow popup below
  • Font: Choose the font used for the text in the breadcrumb trail
  • Color: Choose the colour for the text in its Normal state in the breadcrumb trail
  • Size: Choose the size for the text
  • Hover: Choose the color you want the text to change to on mouseover from this popup
  • Arrow: If Custom Files is chosen in the Appearance popup, you can choose the graphic of your preference in this popup to change the graphic between the levels within the breadcrumb text.
  • Underline links: Choose the underline behavior for the links in the breadcrumb trail text.
There is another panel of the Actions palette which you can open by clicking on the Navigation Menus option. This panel lets you do more than simply using hyperlinks for each level of the breadcrumb - it changes things so that a breadcrumb trail with more than one option in a particular level is made to display a drop-down menu where the visitor can choose other pages within that level of the site structure. When opened, a lot of new options are offered:


  • Font, Color, Size and Hover work in the same way as the top panel of the Actions palette
  • Highlight: This is the color used as the background highlight in the sub-menu drop down menu when links are moused over
  • Underline links works in the same was as the top panel of the Actions palette
  • Background: This controls the area of the drop down menu (i.e., the complete drop down menu rather than the individual sub-menu mouseover color which is controlled by the Highlight option above.
  • The Background Popup: Click and hold then choose Select…, then choose a graphic to use for the drop down menu's background.
  • Border: Let's you choose to display a border on the drop down menu. Choose a pixel width and a color for the border.
There is no live preview in the Navigation Bar Action item - preview in a browser to see the Navigation Bar working. If you preview the Home page you will only see Home in the breadcrumb trail. If you preview (for example) the Thyme page, you will see that it is possible to click back to the top page of the "herbs" or "plants" section of the site, or choose Home to return to the Home page.



Using Custom Images with the Navigation Bar Action

The Action lets you choose a custom graphic for the arrows of the breadcrumb trail and also a graphic for the sub-menu background. There are two ways to do this - the first way is select a folder in the Appearance popup (inside which are two graphics with very specific names, see below), and the second way is to choose a file that's saved on your hard disk.

To choose the graphics by using the Select Folder option in the Appearance popup, create a folder on your hard disk and save one or two files in that folder so they can be found by the Action when the folder is chosen. The graphics must have the file names of:
  • bg.gif, gb.jpeg or bg.png (for the Menu Background)
  • arrow.gif, arrow.jpeg or arrow.png (for the arrows used in the breadcrumb trail)

User Opinions

No users have voted.

How would you rate this answer?



Thank you for rating this answer.

Continue