<navigation:primary>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary
DESCRIPTION
ATTRIBUTES
autoPopulateLevel
bootStrap
classLiCurrent
id
includeStyles
mobileBreakPoint
openOnHover
orientation
preventWrap
rootPage
navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<navigation:primary>` </...>

Creates a menu which can load pages dynamically from website pages.

Related Tutorials

Content

<navigation:item>
(Optional) Manually add links to appear inside the nav.

Attributes

- `autoPopulateLevel`
int
Autopopulate Level

Sets the depth of sub menus.

Eg:
  • 0 - no auto populate.
  • 1 - Level 1: Show pages directly under RootPage.
  • 2 - Level 2: Show pages directly under RootPage, with sub-pages in a drop down.
  • 3 - Level 3: As with Level 2, with further sub-pages in an additional drop down.

Default = 1.
- `bootStrap`
bool
Include Bootstrap Classes

If true, then Bootstrap classes will be applied to the navigation menu. (Be sure to include Bootstrap's CSS in your design).

  • Adds class="dropdown" on <li>s with dropdowns.
  • Adds class="dropdown-toggle" data-toggle="dropdown" on <a>s with dropdowns.
  • Adds class="dropdown-menu" to <ul>s with dropdowns.

Default = false.
- `classLiCurrent`
string
CSS class to set on a nav item, when it matches the current page.
- `id`
string
(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `includeStyles`
bool
Include Oncord Styles

Whether to include JavaScript and CSS to add drop down functionality.

Set as false to get a blank <ul><li> list
- `mobileBreakPoint`
int
Mobile Break Point

Integer representing a pixel value which specifies the size of the viewport at which mobile navigation styles will be enabled.

Default = 700

Disabled in the Oncord Web Editor for usability.
- `openOnHover`
bool
Open Dropdowns on Hover

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. Default = false.
- `orientation`
string
The orientation of the pop out menu. Default = "horizontal".
Other possible values: "vertical".
- `preventWrap`
bool
Prevent Link Wrapping

Whether primary navigation should prevent wrapping of links when there is constricted space by reverting to a mobile style menu.
Default = false

Disabled in the Oncord Web Editor for usability.
- `rootPage`
string
The root page to populate navigation items from.
Default = "/".

Tutorials

Oncord includes a range of UI Controls to tackle common website navigation elements:  

Dynamic Navigation

A navigation menu is said to be dynamic where it reflects the page sitemap structure, updating automatically when Pages are added, removed, or re-ordered.

Dynamic navigation is usually preferable over a statically coded list of hyperlinks, as it allows non-technical administrators to alter the navigation without manipulating code.

Primary Navigation

The main "primary" method of navigating a website. The primary navigation menu is usually located within a website header element, located towards the top of the page.

 Primary Navigation UI Control: <navigation:primary>

View Tutorial View Tutorial

Secondary Navigation

Fall-back navigation aimed at providing extra navigation items relevant to the users current position on the site. Usually used for sidebar navigation menus, or pages listed in the footer of the website.

 Secondary Navigation UI Control: <navigation:secondary>

View Tutorial View Tutorial

Breadcrumb Navigation

Shows the current navigation item, in addition to the previous parent navigation items.

 Breadcrumb Navigation UI Control: <navigation:breadcrumbs />

View Tutorial View Tutorial

Sitemap

A map of the hierarchy of all pages on the website. A human-readable sitemap is automatically generated on all Oncord websites at yourwebsitedomain.com/sitemap. 

A sitemap.xml file is also generated automatically, at the url yourwebsitedomain.com/sitemap.xml

What's Next?

To get started, click here to learn how to implement a dynamic primary navigation menu. 

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:

<navigation:primary id="navMain" rootpage="/" autopopulatelevel="2" includestyles="true"> <navigation:item at="start" page="/">Home</navigation:item> </navigation:primary>

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: 

<ul id="navMain" role="navigation"> <li><a href="/">Home</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/services/">Services</a> <ul> <li><a href="/services/web-design/">Web Design</a></li> <li><a href="/services/seo/">SEO</a></li> <li><a href="/services/graphics-design/">Graphics Design</a></li> </ul> </li> <li><a href="/contact/">Contact Me</a></li> </ul>

Example: A Basic Header & Primary Navigation Menu

<templates:header contentsize="md" variant="Slim" logo="/media/website_designs/1/logo.png" maxlogoheight="100px" maxlogowidth="150px"> <navigation:primary id="navMain" includestyles="true" autopopulatelevel="2" /> </templates:header>


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.

Defining Class and ID Attributes

Oncord controls can be assigned class and id attributes for styling purposes in the same way as a regular HTML element. For example;

  • Navigation code
  • Markup
  • CSS Targeting
<navigation:primary id="navigationMain" class="navElement" orientation="horizontal"></navigation:primary>

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.

Styling The Current Navigation Item

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;

  • Navigation code
  • Markup
  • CSS Targeting
<navigation:primary id="navigationMain" classlicurrent="selected" class="navElement" orientation="horizontal"></navigation:primary>

Styling Parent Secondary Navigation Items

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".

  • Navigation code
  • CSS styling
  • Markup
  • Preview
<navigation:secondary id="sidebar_nav" includeparentwhennochildren="false" includeparent="true" includeparentclass="parent" orientation="vertical" autopopulatelevel="1" class="newsLinks"></navigation:secondary>