This article will offer an in-depth guide on how to create dynamic, self-populating navigation on a Synergy 8 powered website.
Primary navigation is the main method of navigating a website.
Using dynamic navigation allows the navigation items to be automatically populated based on the pages created in the admin console, rather than by using links hard-coded into the design. The primary navigation on the Synergy 8 website can be seen in the top right side of the header.
Defining The Primary Navigation Region
You can specify the location of a primary navigation region by using a <ss:navigation:primary> tag. This tag simply generates an unordered list <ul> based on the sitemap. This unordered list reflects page ordering and whether or not the page is set to display in navigation. The following is a basic implementation of a primary navigation region which will populate with all pages located directly under the home page;
- Navigation code
- CSS styling
The <ss:navigation:item at="start" page="/" /> tag in the above code places a link to the homepage at the start of the dynamic navigation. You can manually add extra links into the primary navigation using the same method.
Primary Navigation Attributes
Each attribute is separated by a space and enclosed in quotes, the same practise as used in HTML. All primary navigation attributes can be viewed in the API here. The primary navigation tag has the following commonly used attributes, remember you can also use any HTML ul attributes (width, class, etc) in addition to these;
- RootPage="/"- This specifies the root page from which the navigation will be populated. In most situations primary navigation will be set to the page "/".
- AutoPopulateLevel="1" - This attribute sets the level of recursion for submenus and is used to implement drop-down menus. A value of 0 will not automatically populate the dynamic navigation menu, meaning you will need to populate the list with <ss:navigation:item> tags instead. A value of 1 will populate the navigation but will not show a dropdown menu for additional pages. A value of 2 will populate a drop-down menu with the first level from the RootPage attribute, 3 = populate two levels (drop down) - 4 = populate two three (drop down, plus third level).
- Orientation="horizontal" - This attribute defines the orientation of the menu and can be set to either "horizontal" or "vertical".
- IncludeParentPageLevel="0" - Whether or not to include the root page in the navigation. Sets the nesting level for how many levels to include the parent page for.
- ID="NavMain" - Sets id of the object - used for the html id attribute and referencing in the parser's document object model.
- ClassLiOpen="selected" - This attribute is used for hover css styling.
- ClassLiCurrent="current" - This attribute is used for css styling links based on whether they are currently open.
Primary Navigation Markup
As previously stated, the <ss:navigation:primary> tag produces as unordered list that reflects the sitemap of the website. The above example of primary navigation will produce the following code when rendering a website:
When assigning a Synergy 8 control element an ID, make sure it is being assigned a unique ID. If the primary navigation is not assigned an ID it will be assigned a generated ID instead. In regards to CSS styling conventions, the ID attribute of an element is supposed to be unique. Where common styling is being used the class attribute can be used in addition to an ID.
Example: Centered Drop-down Primary Navigation
- Navigation code
- CSS styling