JSFiddle - React, Tailwind, and code Playground

by Abbas Jaber

HTML

<div ng-app="myApp" ng-controller="Ctrl">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button> <a class="brand" href="#">{{nav.projectTitle}}</a>

                <div class="nav-collapse collapse">
                    <ul class="nav">
                          <li ng-repeat="link in links" class="{{link.className}}"> <a href="{{link.url}}" class="{{link.sub && 'dropdown-toggle' || ''}}" data-toggle="{{link.sub && 'dropdown' || ''}}">{{link.name}} 
                            <b ng-show="link.sub" class="caret"></b>
                        </a>

                            <ul class="dropdown-menu" ng-show="link.sub">
                                <li ng-repeat="subItem in link.sub"> <a href="{{subItem.url}}">{{subItem.name}}</a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

app = angular.module('myApp', []);

function Ctrl($scope) {
    var data = {
        "projectTitle": "My Website Title",
            "links": [{
            "name": "Home",
                "url": "/",
                "className": ""
        }, {
            "name": "About",
                "url": "/about",
                "className": ""
        }, {
            "name": "Contact",
                "url": "/contact",
                "className": ""
        }, {
            "name": "Categories",
                "url": "/categories",
                "className": "dropdown",
                "sub": [{
                "name": "Tech Stuff",
                    "url": "/techStuff"
            }, {
                "name": "AngularJS",
                    "url": "/angularJS"
            }, {
                "name": "HTML5",
                    "url": "/html5"
            }, {
                "name": "Javascript",
                    "url": "/javascript"
            }, {
                "name": "jQuery",
                    "url": "/jquery"
            }]
        }]
    };

    $scope.nav = data;
    $scope.links = data.links;
}