<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="collapse navbar-collapse" id="navbarNav results_buttons">

var data =[ { "id" : "1", "name" : "100m" }, { "id" : "2", "name" : "Long Jump" }, { "id" : "3", "name" : "Shot Put" }, { "id" : "4", "name" : "High Jump" } ]; var $menu = $( '#navbarNav ul.navbar-nav' ); $.each( data, function(){ var url = this.url || '#'; $menu.append( '<li class="nav-item">' + '<a class="nav-link" href="' + url + '">' + ( this.name || this.id ) + '</a>' + '</li>' ); });