JavaScript NavigationBar

Invoke the setContentAt method of the jqxNavigationBar. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxnavigationbar'>
    <!--Header-->
    <div>Menus</div>
    <!--Content-->
    <div></div>
    <!--Header-->
    <div>Header 2</div>
    <!--Content-->
    <div>Content 2</div>
</div>

CSS

.listItem {
  color: red;
}

JavaScript

$("#jqxnavigationbar").jqxNavigationBar({
      width: 400,
      height: 200,
      theme: 'energyblue'
  });
  
  //your JSON data
  var dataFromJSON = ['Home', 'About', 'Other Menu'];
  
  var contentTemplate = ``;

dataFromJSON.forEach(menu => {
	
  var itemElement = document.createElement('li'); //createElement
  
  itemElement.style.listStyleType = 'none' //apply style
  
  itemElement.classList.add('listItem'); //add class
  
  itemElement.textContent = menu; //bind the JSON data element to the HTML element
  
  contentTemplate+=itemElement.outerHTML; //append the element to the HTML template
  
})
  
$('#jqxnavigationbar').jqxNavigationBar('setContentAt', 0, contentTemplate); //set the template to the bar with index 0