Navigation Widget

The Navigation widget enables you to place a vertical or horizontal navigation bar on a page or template. The widget automatically generates links to sections, section links, and external links on one or more levels of a site to create a navigation bar. You can configure certain properties of the navigation bar such as how many levels of navigation links it can include and whether it is horizontal or vertical.

The Navigation Widget does not have an associated asset type, and you cannot open or edit it through a form or editor. You can change formatting and style by editing its configuration properties.

For navigation consistency throughout your site, place navigation widgets on templates rather than pages. Typically, site administrators are responsible for maintaining navigation.

Widget Configuration Properties

Max Levels - Maximum number of levels of navigation links that can appear in the navigation bar. Default is 3.
Root Level - The site level that the navigation bar uses as its first level. If you enter a site level higher than the page's site level, the widget cannot create a navigation bar. Default is 1.
The navigation bars in the table represent the following site.
Nav Tree Example 

If you enter 
a Root Level of . . .
The navigation bar shows . . .Example
1 (default)The home page (first site section level) and the second level of site sections in the first level of navigation.
The descendants of the second level of site sections in its following levels.
 
2The second level of the site's sub-sections in the first level of navigation.
The descendants of the second level of sections in the following levels.
Nav Bar 1
3The third level of the site's sub-sections in the first level of navigation.
The descendants of the third level of sections in the following levels.
Nav Bar 2
4The fourth level of the site's sub-sections in the first level of navigation.
The descendants of the fourth level of sections in the following levels.
Nav Bar 3
5Nothing. You cannot enter a root level that is two or more levels higher than the sub-section level. 


Layout - Drop list of layout options for the navigation bar. Options are:

  •  
    • horizontal - Gives the navigation bar a horizontal structure. Site visitors can move their cursors over links to view sub-levels of navigation links. 
      Nav Bar 1
    • vertical - Gives the navigation bar a vertical structure. By default, maximum level of links are shown. 
      Vertical Bar
    • horizontal rollover - (default) Gives the navigation bar a horizontal structure. Site visitors can move their cursors over links to view sub-levels of navigation links. 
      Horizontal Rollover
    • vertical rollover - Gives the navigation bar a vertical structure. Site visitors can move their cursor over links view sub-levels of navigation links. 
      Vertical Rollover
    • navbar rollover - Gives the navigation bar a horizontal structure in which two levels of links are always visible. By default, the second level displays sub-section links of the current page link, but site visitors can move their cursors over other top-level links to display their sub-section links in the second level. At any level, site visitors can move their cursor over links to view their sub-links. 
      Nav Bar

 

Widget Style Properties

CSS Root Class - Text box for entering the name of a custom CSS class to format the navigation bar. Your site designer can supply you with the name of the class.

Customizing Entries in a Navigation Bar

You can customize the appearance of each entry in a navigation bar by adding custom formatting to classes that you add to its theme. The classes enable you to select specific navigation sections within your site, and the formatting they define is applied to the corresponding entries in the navigation bar. To explain how these classes work, we will use examples from the East Coast site's navigation tree shown at the top of this page.

The classes for formatting navigation entries are:

  • nav-level-n - The horizontal navigation level. For example, nav-level-1 includes the entry Home, and nav-level-2 includes the entries Who We AreOur Products, and Our Services.
  • list-position-n - The vertical position of an entry relative to its siblings (siblings are all entries at the same level branching from the same parent node). list-position-n is not level dependent; for example all sections with at least 2 sub-sections contain a list-position-2 entry. For the sample site, Our ProductsWriting Utensils, and Staplers are all list-position-2 entries. Note that list-position-1 includes Home.
  • nav-entry-n - The position of an entry relative to the other entries at the same horizontal level. In the example, Desk Supplies is nav-entry-3. If another sub-entry is added to Our Products, and it is inserted before Desk Supplies, then Desk Supplies becomes nav-entry-4.

You can also specify a single navigation link. For example, nav-level-2 list-position-2 would specify the Our Products entry.

To use these classes, add them to your theme:

  1. Open your theme for editing. Either modify the site theme's CSS files directly or edit a template theme's CSS file.
  2. Add CSS for styling elements. Each time you want to view a style change in your theme file, refresh your browser. 
    The syntax for defining element styles is: .sf-menu li.[custom format class name] a {[property] : [value]}
  3. In this example, our original navbar appears with all blue links:
    Nav Bar Orig
  4. We want to make the second level of links green. To specify the second level we use nav-level-2.
    Sample Nav Override
  5. Click [Save].
  6. To check your results, open an item that uses the customized navbar and displays a second level. The level two entries are green, which is what we specified. Home is blue because it is a first level entry. 
    Nav Green Level 2
  7. To keep the second level entries green and make all first siblings and Home red, we use list-position-1. Edit the theme file with the following CSS: 
    Nav List Position 
    Since list-position-1 includes Home, it is red, and since Who We Are is a first sibling, it is red. 
    Nav Red Alt Rendered
  8. Now, to show how nav-entry-n works, we will make the third entry in each level shown on the list gold. We add the following CSS to our theme: 
    Nav Entry 
    Although Our Services appears fourth in our navigation bar, it is actually the third entry in its level, so it is gold. If we hover our cursor over Our Products, we see the level under it, and the the third entry, Desk Supplies, is gold. 
    Nav Bar With Gold