# 03. __Navigation__
[](https://www.totaljs.com/support/) [](https://messenger.totaljs.com)
Each navigation needs to be defined in some `template`. The entire 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
## Create navigation
Each navigation needs to be defined in `templates` (__Pages__ section) and templates can contain unlimited counf of navigations, for example: `mainmenu`, `footer`, etc..
__Example__:
```html
@{navigation mainmenu:Main menu}
@{navigation footer:Footer menu}
...
```
- navigation must be defined via `@{navigation ID:NAME}` command in the page template
- navigation must be rendered manually by developer
- navigation is automatically created when the template is submitted
- CMS merges all navigations together according to the `ID`
## Add links
Links need to be added into the navigation manually. Just open `Pages` section and choose your navigation in the right panel. CMS shows all registered navigations:
__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:
## Rendering
Navigations are stored in a global static object: `F.global.navigations` and each navigation needs to be rendered manually.
__Navigation item__:
```javascript
// var nav = MAIN.navigations.navigation_id;
// For example:
var nav = MAIN.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__:
```javascript
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:__
```html
@{foreach m in MAIN.navigations.mainmenu.children)
@{m.name}
@{end}
```
__Wich icon, tooltip and target:__
```html
@{foreach m in MAIN.navigations.mainmenu.children}
@{if m.icon}@{fi}@{m.name}
@{end}
```
__With the first-level of children:__
```html
```
__Render children according to the URL__:
```html
@{if MAIN.navigations.mainmenu.url[url] && MAIN.navigations.mainmenu.url[url].parent}
@{fi}
```