CMS / 03. Navigation
Updated: 26. December 2017
Author: Peter Širka

03. Navigation

Professional Support Chat with contributors

Each navigation needs to be registered in Settings and all links need to be added manually in Pages section. The whole functionality of navigation is stored in the model /models/navigations.js.

What should i know?

  • navigation can contain links with advanced settings
  • navigation needs to be rendered manually
  • all navigations are loaded into the memory when the app is started

Settings

Each navigation needs to be registered in the CMS settings. Logged user sees navigation name and identificator is needed for rendering. You can defined unlimited counf of navigations, for example: mainmenu, footer, etc..

Settings of navigation

Links need to be added into the navigation manually. Just open Pages section and click on the navigation button. CMS shows all registered navigations.

Edit links in navigation

Good to know:
Some links can be linked automatically if the user choose a page according to the sitemap. User can specify in the Page settings what fields can be synchronized in navigations:

Navigation in Page settings

Rendering

Navigations are stored in a global static object: F.global.navigations and each navigation needs to be rendered manually.

Navigation item:

// var nav = F.global.navigations.navigation_id;
// For example:
var nav = F.global.navigations.mainmenu;

nav.url;
// Contains relative URL addresses. It's a quick access to rendering sub-links according to the URL
// returns {Array Object}

nav.children;
// Contains all registered links
// returns {Array Object}

nav.dateupdated;
// The last date of update
// returns {Datetime}

nav.stringify();
// Serializes this navigation to JSON
// returns {String}

Link object:

var item = nav.url['/products/'];
// or
var item = nav.children[0];

item.parent;
// Contains a parent of this item and returns same object structure
// returns {Object}

item.level;
// Contains a number of level
// returns {Number}

item.children;
// Contains all children with same structure as this object
// returns {Array Object}

item.url;
// A link URL address
// returns {String}

item.name;
// A link name
// returns {String}

item.title;
// A title for tooltip
// returns {String}

item.target;
// A value for link "_target", can contain "_self" or "_blank"
// returns {String}

item.icon;
// An icon (font-awesome without "fa-")
// returns {String}

item.idpage;
// Page ID according to the sitemap
// returns {UID}

item.id;
// Unique identificator of link
// returns {String}

item.behaviour;
// This property can contain these values "default", "info", "warn", "highlight" or "special"
// This feature needs to be coded manually
// returns {String}

item.contains(url, [absolute]);
// Determines whether this item contains "url". It's a great solution for highlighting item in navigation
// @url {String} Relative URL address
// @absolute {Boolean} Only compares this item and its all childs (default: false)
// returns {Boolean}

Rendering in views

I recommend to render a navigation in a layout, but navigation can be rendered everywhere. Just follow your needs.

Quick rendering:

@{foreach m in global.navigations.mainmenu.children)
    <a href="@{m.url}">@{m.name}</a>    
@{end}

Wich icon, tooltip and target:

@{foreach m in global.navigations.mainmenu.children}
    <a href="@{m.url}"@{if m.target === '_blank'} target="_blank"@{fi}@{if m.title} titlte="@{m.title}"@{fi}>@{if m.icon}<i class="fa fa-@{m.icon}"></i>@{fi}@{m.name}</a>    
@{end}

With the first-level of children:

<nav>
@{foreach a in global.navigations.mainmenu.children}

    <a href="@{a.url}">@{a.name}</a>

    @{if a.children.length}
        <nav>
        @{foreach b in a.children}
            <a href="@{b.url}">@{b.name}</a>
        @{end}
        </nav>
    @{fi}

@{end}
</nav>

Render children according to the URL:

@{if global.navigations.mainmenu.url[url] && global.navigations.mainmenu.url[url].parent}

    <nav>
    @{foreach a in global.navigations.mainmenu.url[url].parent.children}

        <a href="@{a.url}">@{a.name}</a>

        <!-- Rendering the first-level of children -->
        @{if a.children.length}
            <nav>
            @{foreach b in a.children}
                <a href="@{b.url}">@{b.name}</a>
            @{end}
            </nav>
        @{fi}

    @{end}
    </nav>

@{fi}