Dynamic Primary Navigation
This article covers how to create a dynamically populated primary navigation menu on an Oncord powered website.
A primary navigation menu is typically contained within a website header element, where the header is either a custom HTML element, or Oncord's <templates:header> UI control.
The Primary Navigation UI Control
A primary navigation menu can be added through use of the <navigation:primary> UI control:
This control renders an unordered list <ul> based on the page structure configured via Dashboard > Website > Pages.
The rendered unordered list reflects the order of Pages, and only renders Pages configured to display in navigation. The "Page Title" is used as the text that appears as the link (more here).
This element usually includes some JavaScript and CSS responsible for adding common features, such as drop-down functionality and a responsive mobile menu. Alternatively, Oncord's default styles can be disabled by with the attribute IncludeStyles="false".
Primary Navigation Attributes
Below is a list of commonly used attributes. You can also add any standard HTML attributes (id, class, style etc). For a full list of all available attributes, visit the Controls API here.
RootPage="/"- This attribute specifies the root page from which the navigation will be populated. In most situations primary navigation will be set to the home 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 <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="true" - Some default CSS styling is applied to primary navigation menus. To remove Oncord's default CSS styles, set to false.
mobileBreakPoint="700" - The pixel value the viewport needs to be for a mobile navigation menu to display (default 700px).
openOnHover="true" - If set to true, dropdown menus will appear when the mouse is hovering over the menu. If set to false, the user must click to reveal the submenu.
preventWrap="true" - Whether primary navigation should prevent wrapping of links when there is constricted space by reverting to a mobile style menu.
ClassLiOpen="selected" - This attribute is used to define a class to be added to the selected navigation menu item, for CSS styling.
ClassLiCurrent="current" - This attribute is used to define a class to be added to the current navigation menu item, for CSS styling.
Primary Navigation Markup
The <navigation:primary> tag renders an unordered list <ul> that reflects the sitemap of the website. The HTML structure that is produced will differ, depending on how the above attributes are used.
An example: IncludeStyles="false", to disable Oncord's default styling and extra features:
Example: A Basic Header & Primary Navigation Menu