Sidenav

From servoy-extra-components v1.0.4

Sidenav is a 4-levels depth navigation component. It can be used as side menu having selectable and collapsible menu items. The user can select or expand one menu item per time; a selected menu item is automatically expanded. The developer can control the sidenav component programmatically by editing the element's runtime properties and using the element's API. The sidenav can slide in/out to the left side or to the right side. The component is fully stylable with CSS3.

Init the Sidenav

Use the api setRootMenuItems to populate the sidenav with Menu Items. You can nest Menu Items up to 4 levels depth.

var menu = [{
    id: 1,
    text: "Sample Item #1",
    styleClass : "sn-large",
    iconStyleClass:  "glyphicon glyphicon-search",
    data: { description: "This is sample information that can be added to a menuItem" },
    menuItems: [{
  	  id: 5,
  	  text: "Sub Item #1"
  	}, {
  	  id: 6,
  	  text: "Sub Item #2"}]
  }, {
    id: 2,
    text: "Sample Item #2"
  },{
    isDivider: true
  },{
    id: 3,
    text: "Sample Item #3",
    enabled: false
}];

  elements.sideNavigation.setRootMenuItems(menu);

The method setRootMenuItems requires an Array of Menu Item object.

Menu Item

The menu item is a JSON object representing an item in the sidenav. A menu item may nest other menu items. A menu item may be also used as divider, which is nothing else then a line separating the menu item above and below, in this case all other properties of the menu item are ignored.

Property	Type	Required	Description
String, Number	id	yes	uniquely identifies the menuItem in the menu object.
String	text	no	The menu text, optional, default is empty.
String	styleClass	no	add style classes to the menuItem, optional,. Separate multiple value with a SPACE char. example 'nav-large nav-primary'.
String	iconStyleClass	no	use style classes to display icons as Font Icons, optional. example 'glyphicon glyphicon-search'.
Boolean	enabled	no	menuItem cannot be selected or expanded if disabled, optional. Default true.
Object	data	no	data object can be used to add custom properties to the menuItem, optional. For example you may set the formName to be shown when the menuItem is selected { formName: "aFormName", description: "This menu item will open the given form" }.
Array	menuItems	no	an array of nested menuItems, optional.
Boolean	isDivider	no	if true render a divider into the menu instead of a menuItem, optional. All other properties are ignored. Default false.

This is a menu item with 2 sub menu items

var menuItem = {
    id: 1,
    text: "Sample Item #1",
    styleClass : "sn-large",
    iconStyleClass:  "glyphicon glyphicon-search",
    data: { description: "This is sample information that can be added to a menuItem" },
    menuItems: [{
  	  id: 5,
  	  text: "Sub Item #1"
  	}, {
  	  id: 6,
  	  text: "Sub Item #2"}]
  };

This menu item is instead rendered as a divider

 var menuDivider = {
    isDivider: true
  };

Sidenav properties

Property	Type	Default	Description
Boolean	animate	true	The menu animates when opened/closed and when items are expanded/collapsed.
Boolean	enabled	true	The menu is disabled, menu items cannot be selected or expanded. If disabled the items cannot be selected/collapsed neither programmatically via API.
String	iconCollapseStyleClass	fa fa-cart-down	Font Icon used as icon for the menu item when is expanded.
String	iconExpandStyleClass	fa fa-caret-right	Font Icon used as icon for the menu item when is collapsed.
String	iconOpenStyleClass	fa fa-bars	Font Icon used as icon for the toggle button to open/close the menu.
Boolean	open	true	If true the menu is open, when changed to false the menu slides away. Open cannot be set to false if the slidePosition is STATIC.
String	slidePosition	LEFT	defines to which side the menu slides out when closed. Possible values are LEFT, RIGHT and STATIC. A STATIC menu cannot slide away, is always open.
String	styleClass		menu style Classes.
Boolean	visible	true	if the menu is visible or not.