Highlighting Navigation Items

Each web page may have a navigation item highlighted in order to indicate which section of the website the visitor is viewing. There are two ways to highlight a navigation item: setting a javascript variable, or the automatic folder matching method.

Javascript Variable

This is the method used in the 2007 state template. Within the <head> of each page is a javascript variable called “defaultMainList”. Set the value of this variable to the text of the navigation link that you want to highlight.

<script type="text/javascript">


var defaultMainList = “Home”;

// –>



Folder Matching

If your web pages are organized into separate folders for each navigation item, you may use this method instead. When a web page is viewed, a javascript function is called. This function takes the base folder of the current page and tries to match it with a link in the navigation. If it is found, that navigation item is highlighted.

To use this method, simply comment out or delete the “defaultMainList” variable. The javascript function is included in the 2010 template.

If you wish, you may use the javascript variable method for some pages, and the folder matching method for other pages within the same site. If the “defaultMainList” variable is set, it will take precedence.


Submit a Comment