This article will offer an in-depth guide on how to create dynamic, self-populating navigation menus on a Oncord powered 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 template.
This allows clients and non-technical users to add new pages, re-order the navigation menu and move pages.
Adding The Primary Navigation Menu
You can add a primary navigation menu to your website design template through use of the <ss:navigation:primary> control.
This tag will render an unordered list <ul> based on the sitemap page structure. This unordered list reflects page ordering, and whether the page is set to display in navigation.
The "Page Title" is used to define the text to appear as the link.
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
Primary Navigation Attributes
Below is a list of commonly used attributes, remember that you can also use any standard HTML attributes (width, class, etc).
All primary navigation attributes can be viewed in the API here.
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).
IncludeStyles="false" - Some default CSS styling is applied to primary navigation menus. To turn this off, just set this to false. (usually set to false when implementing navigation via a CSS framework like Bootstrap).
Orientation="horizontal" - If includestyles is set to true, this attribute defines the orientation of the menu and can be set to either "horizontal" or "vertical".
Bootstrap="true" - Adds Bootsrap (v3) classes to the navigation menu.
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 Oncord control element an ID, you need to ensure it is unique. 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, and you may experience render issues if it is not. 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