Skip to main content
Version: v11.3.2

Navigation - Basic Usage

Steps to Create Navigation​

In this post, we will walk through the steps to create a simple navigation, with icons and links to pages.

We will be using a Model Variable for the purpose of this example:

  1. Create or Open page where you want to use the Nav Widget.
  2. Open the Variables dialog from the Variables menu and using New Variable create a Model variable (Know more about variables).

  1. Create a new Model Variable called as navvar and select isList.

  1. Add the following in the Text Editor, this defines the structure for Menu identifying Label, Icon, Link, Badge Value and sub-action. Icons can be halflings from glyphicons or font awesome icons.
[
  {
    "label": "Home",
    "Icon": "glyphicon glyphicon-home",
    "Link": "#Main",
    "badge-value": "2",
    "sub-action": {
      "label": "Sub-action"
    }
  },
  {
    "label": "Projects",
    "Icon": "wi wi-folder-open",
    "Link": "#projects",
    "badge-value": "3"
  },
  {
    "label": "Services",
    "Icon": "wi wi-settings-applications",
    "Link": "#services",
    "badge-value": "1"
  }
]
  1. Bind the Value property of the Menu widget to the variable created in the previous step.
  2. Set the

  • Action Label to label,

  • Action Icon to Icon,

  • Action Link to Link,

  • Item Badge to badge-value,

  • Sub Actions to sub-action.

    If you need you can modify the JSON structure given for the Model Variable and do the appropriate settings.

  1. Run the application and see the menu in action.

Multilevel Nav​

You can have multiple levels of nav-items. Follow the steps from the above example, replace the Variable JSON with the below code:

[
    {
    "label": "item1",
    "icon": "wi wi-euro-symbol",
    "children": [
    {
    "label": "sub-menu-item1",
    "icon": "wi wi-euro-symbol"
    },
    {
    "label": "sub-menu-item2",
    "icon": "wi wi-euro-symbol",
    "children": [
    {
    "label": "sub-menu-child-item1",
    "icon": "wi wi-euro-symbol",
    "children": [
    {
    "label": "sub-menu-child-item1-item1",
    "icon": "wi wi-euro-symbol",
    "path": "/item1/item2/item1/item1"
    },
    {
    "label": "sub-menu-child-item1-item2",
    "icon": "wi wi-euro-symbol",
    "path": "/item1/item2/item1/item2"
    }
    ]
    },
    {
    "label": "sub-menu-child-item2",
    "icon": "wi wi-euro-symbol"
    }
    ]
    }
    ]
    },
    {
    "label": "item2",
    "icon": "wi wi-euro-symbol"
    },
    {
    "label": "item3",
    "icon": "wi wi-euro-symbol"
    },
    {
    "label": "item4",
    "icon": "wi wi-euro-symbol"
    }
]

You will get the following nav.