sidenav

Since V1.1.0

Eager to get started ? Check out this video intro

Sidenav is a 4-levels depth navigation component. Is a side menu with selectable and collapsible nested 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 can be used as a tablesspanel container, having a containedForm on the side of the menu which animates together with the menu. The component is fully stylable with CSS3.

Sidenav Component

Content under construction

Table of contents

• Getting Started

• Menu Item

• Styling Sidenav

• Sidenav Properties

• Sidenav Events

• Sidenav API

Getting Started

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.

Menu Item properties can be found here.

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
  };

Update a Menu Item

To update a menu item you should get the menu item object using the component's API getMenuItem, any change to the returned object will be reflected on the sidenav component.

Example

var menuItem = elements.sidenav.getMenuItem(1);
menuItem.text = "Update the text of the menuItem";
menuItem.styleClass = "nav-large nav-bold";
menuItem.data = { "lastUpdate" : new Date(); }

Updating an old reference of the menuItem which has not been retrieved via API it won't be possible.

Don't do this:

var menuItem = { id:1, text: "init text"};
elements.sidenav.addMenuItem(menuItem);
menuItem.text = "Update text of menu item 1 like this is not reflected on UI"

Instead do

var menuItem = { id:1, text: "init text"};
elements.sidenav.addMenuItem(menuItem);
// get the menuItem via API
menuItem = elements.sidenav.getMenuItem(1); 
menuItem.text = "Update text of menu item 1 like this is correct"

Styling Sidenav

There are several CSS class selectors you can use for fine-grained styling of the sidenav component.

element selector	summary
.svy-extra-sidenav	the root element, style is applied to the sidenav and to the tablesspanel
.svy-sidenav	style the whole sidenav component
.svy-sidenav-tablesspanel	style the tablesspanel container
.svy-sidenav-menu	style the menu and all it's content
.svy-sidenav-dropdown	style the dropdown list in each menu level
.svy-sidenav-item	style the menu item in dropdown list
.svy-sidenav-collapse-icon	stlye the collapse/expand icon
.svy-sidenav-divider	style the divider
.svy-navitem-selected	style the selected menu item
.svy-sidenav-collapsed	style the menu item expanded
.svy-sidenav-disabled	style the menu item disabled
.svy-slide-out	stlye the nav menu when is closed

To style a specif element on a specific level combine the element element selector above with the level selector below

level selector	summary
.sn-level-1	the elements in root level
.sn-level-2	the elements in the second level
.sn-level-3	the elements in the third level
.sn-level-4	the elements in the fourth level

Examples

/* Style all the menu items */
.svy-sidenav-item {
    font-size: 12px;
    color : #444;
    padding: 8px 15px;
}

/*Style the menu item in the first level only */
.svy-sidenav-item.sn-level-1 {
    font-size: 18px;
    color: #000;
}

/* Show a border the the selected item in the first level only */
.svy-navitem-selected.sn-level-1 {
    border-left: 3px solid;
}

Sidenav Properties

Sidenav properties can be found here.

Sidenav Events

Sidenav events can be found here.

Sidenav API

Sidenav API methods can be found here.

addMenuItem

Add a menu item. The menu is added as sub Menu Item if a menuItemId is provided, otherwise is added in root. If index is provided the menu is added at the specified index position, otherwise is added as last element. Return false if menuItemId cannot be found.

Example

 var menuItem = {
  id: 100,
  text: "Sample Item #1",
  styleClass : "nav-large nav-primary",
  iconStyleClass:  "glyphicon glyphicon-search",
  data: { description: "This is sample information that can be added to a menuItem" },
  menuItems: [{
  	id: 101,
  	text: "Sub Item #1"
  	}, {
  	id: 102,
  	text: "Sub Item #2"}]
  };
  elements.sideNavigation.addMenuItem(menuItem, 1, 0);

clearMenuItems

Remove all the menu items. If depth is specified removes all the menu items at depth. If depth is equal to 1 all roots will be removed. Default depth is 1.

Example

 // clear the whole menu removing all nodes. 
 elements.sidenav.clearMenuItems();
  
 // clear menu at depth 2 removes the sub menu items of each root menu.
 elements.sidenav.clearMenuItems(2);

getMenuItem

Returns the menu item object.

getParentMenuItem

Returns the parent menu item object of the menu item with id menuItemId. Nothing is returned if the menu item is in the root menu.

getRootMenuItems

Returns the root menu items.

getSelectedMenuItem

Returns the selected menu item.

getSubMenuItems

Get the menuItems of the menu item with id 'menuItemId'.

isMenuItemEnabled

Returns true if the menuItem and all it's ancestors are enabled. Return false if menuItemId cannot be found or is disabled.

NOTE: The method returns false if any ancestor of the menuItem is not enabled; if the property enabled of the menuItem is set to true, but has a parent with the enabled property set to false, then isMenuItemEnabled returns false.

isMenuItemExpanded

Returns true if the menuItem is expanded.

setMenuItemEnabled

Enable or disable the menu item. Return false if menuItemId cannot be found.

setMenuItemExpanded

Return false if menuItemId cannot be found or is disabled.

setRootMenuItems

Init the menu setting the root menuItems.

Example

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);

setSelectedMenuItem

Select the menu item with the given id. If level is provided search is optimized since it will search only within the descendant of the selected menuItem at level. For example if a root menuItem is selected and level is equal 2 search only in the subMenuItems of the selected root. Return false if menuItemId cannot be found or is disabled.

setSubMenuItems

Set the menuItems as sub menu items of the menu item with id 'menuItemId' Return false if menuItemId cannot be found.

Example

var menuItems = [{
  id: 10,
  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: 12,
  	text: "Sub Item #1"
  	}
  }]
  }, {
  id: 11,
  text: "Sample Item #2"
  },{
  isDivider: true
  }];
  elements.sideNavigation.setSubMenuItems(menuItems);

removeMenuItem

Remove the menu item and all it's subMenuItems from the tree. Return false if menuItemId cannot be found.

removeSubMenuItems

Remove all the sub menu items of the menu item with id 'menuItemId'. Return false if menuItemId cannot be found.

Related Articles

The following articles are recommended for additional reading

• Sidenav Reference Documentation

• Styling and Themes

• Scripting the UI