Secondary navigation provides extra navigation items to assist the user in navigating the website. This article explains how to create dynamic secondary navigation on a Synergy 8 powered website.
The most common application for secondary navigation is a sidebar navigation menu. Making navigation dynamic allows it to be automatically populated based on the pages created in the admin console, rather than by using links hard-coded into the design.
Defining the Secondary Navigation Region
A secondary navigation menu can be added using the <ss:navigation:secondary> tag. This tag generates an unordered list based on the sitemap. This unordered list reflects page ordering and whether the page is set to display in navigation. The following is a basic implementation of a secondary navigation region which has been used as sidebar navigation;
- Navigation code
- CSS styling
Secondary Navigation Attributes
The following attributes are commonly used with the secondary navigation menu, remember you can also use any HTML ul attributes (width, class, etc). All secondary navigation attributes can be viewed in the API here.
IncludeParent="true" - This attribute determines whether the parent page is shown in the navigation menu. For example, if we were viewing an "Our Team" page which had the parent page "About Us", if this attribute is true then about us link would be shown at the beginning of the list.
IncludeParentClass="parent" - This attribute defines the css class of the parent list item when IncludeParent="true".
RootPage="" - This attribute can be used to specify an alternate root page for the secondary navigation, otherwise this attribute is defined automatically.
Orientation="vertical" - The orientation of the navigation menu. Can be assigned the values "horizontal" or "vertical".
ID="sidebar_nav" - Sets id of the object - used for the html id attribute and referencing in the parser's document object model. Each Synergy 8 control element should be assigned a unique id.
ClassLiCurrent="current" - This attribute is used for css styling of the current page navigation item.