navigation:item
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
DESCRIPTION
ATTRIBUTES
at
autoPopulateLevel
id
page
EXAMPLES
Search Navigation Item
navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio 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:item />

Allows you to specify an additional navigation item in a navigation control.

Related Tutorials

Attributes

at
string|int
Position of the item in the parent Navigation.
  • "start" - The item wants to be at the start of the nav (order -1).
  • "end" - The item wants to be at the end of the nav. (order 1000).
  • int - Manual sort order for the list item.

Default = "start".
autoPopulateLevel
int
Sets the level of recursion for sub menus relative to this item.

By default, the AutoPopulateLevel will be set by the parent Navigation control
id
string
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') ?]).
page
string
The page this navigation item links to.

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>

Examples

Search Navigation Item

Add a search icon on the navigation linked to search page of your Oncord website.

HTML:

<navigation:item at="end" page="/search/"><standard:icon library="fontawesome" name="search" size="4" style="width: 16px; height: 16px;" /></navigation:item>