`<navigation:item />`

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>