Skip to main content

Sidebar Menu Architecture

The sidebar menu is constructed using a plain JavaScript array. This means that you can use all of the standard array methods.

The array contains a list of sidebar menu items. These are clickable menu items that either represent a functional callback or a web page, and can be be dynamically added, modified, or removed. The required properties are as follows:
{
  title: string,
  icon: IconInfoInterface,
  isVisible: function,
  template: string,
  items: array,
  isFullScreen: true | false
}
Sidebar menu items use icon info objects to represent graphical icons. The required properties are as follows:
{
  className: string,
  ligature: string,
  path: string
};

Icons can be:

  • Vector symbols: These use NavVis IVION's limited set of material design icons.
  • Image paths: These are URL paths to an image resource in your application.
  • Data URIs: These use Base64 image data.

Template​

The

templateproperty uses a URL path to load a HTML page into the sidebar menu inlet. If you do not want to use a template, set the value to an empty string, e.g. "".
Note: When the menu item is opened, the template is loaded into the memory. It is unloaded when the menu item is closed. This means that any script in the template will be executed when the menu item is activated.

Callbacks​

To create a callback, add the property onClick to the sidebar menu item object, and set the template property to an empty string:

{
  // ...
  onClick: myCallbackFunction,
  template: ""
  // ...
}