JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <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": "Contact2",
                "sub": 0,
                "url": "/about/contact2",
                "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).join('') + '</ul>' : "";
               return '<li>'+node.title +  subMenu + '</li>' ;
           });
       }
$('#menu').html('<ul>'+endMenu.join('')+ '</ul>');
})