JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<h1>Hello World<h1>
    <div id="menu"></div>

JavaScript

$(document).on('ready',function(){

var data =  [{
        "title": "Home",
            "sub": 0,
            "url": "/home",
            "show": 1
    }, {
        "title": "News",
            "sub": 0,
            "url": "/news",
            "show": 1
    }, {
        "title": "About",
            "sub": 1,
            "url": "/about",
            "show": 1,
        child: [{
            "title": "Contact",
                "sub": 0,
                "url": "/about/contact",
                "show": 1
        }]
    }, {
        "title": "Other",
            "sub": 0,
            "url": "/other",
            "show": 0
    }];;

var endMenu =getMenu(data);

    function getMenu(d ){
          return d.map(function(node){
            
              var subMenu = ( node.child && node.child.length > 0) ? '<ul>'+ getMenu(node.child) + '</ul>' : "";
               return '<li>'+node.title +  subMenu + '</li>' ;
           });
       }
$('#menu').html('<ul>'+endMenu.join('')+ '</ul>');
})