jQuery Menu

Set the source property of the jqxMenu. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxMenu'></div>

JavaScript

var source = [{
       label: "Mail",
       items: [{
           label: "Calendar"
       }, {
           label: "Contacts"
       }]
   }, {
       label: "Inbox",
       items: [{
           label: "Admin"
       }, {
           label: "Corporate"
       }, {
           label: "Finance"
       }, {
           label: "Other"
       }]
   }, {
       label: "Deleted Items"
   }, {
       label: "Notes"
   }, {
       label: "Settings"
   }, {
       label: "Favorites"
   }];

   // create jqxMenu
   $("#jqxMenu").jqxMenu({
       source: source,
       width: '180px',
       theme: 'energyblue',
       height: '170px',
       mode: 'vertical'
   });