JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.js"></script>
<div id="thing"></div>

JavaScript

var menu_json = {
    "name": "Personal Banking",
    "url": "/test1.html",
    "children": [
      {
        "id": "1",
        "name": "test2",
        "url": "/products/deposits/test2.html",
        "children": [
          {
            "id": "1",
            "name": "test3",
            "url": "/products/deposits/test3.html",
            "children": [
              {
                "id": "1",
                "name": "test5",
                "url": "test5"
              },
              {
                "id": "2",
                "name": "test6",
                "url": "/products/deposits/test6.html"
              },
              {
                "id": "3",
                "name": "test7",
                "url": "/products/deposits/test7.html"
                
              },
              {
                "id": "4",
                "name": "test8",
                "url": "/products/deposits/test8.html"
              },
              {
                "id": "5",
                "name": "test9",
                "url": "/products/deposits/test9.html"
              },
              {
                "id": "6",
                "name": "test10",
                "url": "/products/deposits/test10.html"
              },
              {
                "id": "7",
                "name": "test11",
                "url": "/products/deposits/test11.html"
              }
            ]
          }
        ]
      }
    ]
}

var test_html = "<ul>",
buildNavHelper = function(curNode){
test_html += "<li>" + curNode.name;
if (curNode.hasOwnProperty('children')){
   test_html += "<ul>" + _.map(curNode.children, buildNavHelper) + "</ul>";
}
test_html += "</li>";   
 };

buildNavHelper(menu_json);
test_html += "</ul>";

$('#thing').append(test_html);