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 Oncord 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.
A secondary navigation menu can be added using the <navigation:secondary> control. This control 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 an example of a basic secondary navigation menu:
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 Oncord control element should be assigned a unique id.
ClassLiCurrent="current" - This attribute is used for css styling of the current page navigation item.
It's as easy as styling an unordered list.
Each navigation control element in Oncord can be assigned ID and class attributes. This gives the developer the ability to code website navigation just as they would on a standard website, while taking advantage of dynamic list generation.
Oncord controls can be assigned class and id attributes for styling purposes in the same way as a regular HTML element. For example;
The orientation attribute of the Primary and Secondary navigation controls attaches the class "popoutMenuHorizontal" or "popoutMenuVertical" to the <ul> depending on whether the attribute has been set to vertical or horizontal. This class removes list styling, padding and margins, sets up float values appropriately and allows for a drop-down menu.
It's a common practise when coding navigation to change the appearance of the current navigation item to make it clear which page the user is currently viewing. This is usually done by adding a "selected" or "current" class to the list item that corresponds to the current page. On the Oncord platform this can be achieved by using the attribute "classlicurrent" on the <navigation:primary> or <navigation:secondary> elements. The previous example can be updated with the classlicurrent attribute as follows;
Similarily to the "classlicurrent" attribute, the "includeparentclass" attribute can be used on a <navigation:secondary> element to allow CSS targeting of the parent navigation item. As an example, see the below implementation of a secondary navigation menu. In this example the "includeparentclass" has been set to "parent".