JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row" ng-app="App">
	  <div class="large-12 columns" ng-controller="NavCtrl">
			<nav class="nav-menu" menu-data="menu"></nav>
          
          <!--             <nav class="top-bar">
            	    		<section class="anav-menu top-bar-section" menu-data="menu"></section>
                		</nav> 
-->
	  </div>
	</div>

CSS

*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body{font-size:16px}body{background:#fff;color:#222;padding:0;margin:0;font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;font-weight:normal;font-style:normal;line-height:1;position:relative;-webkit-font-smoothing:antialiased}a:focus{outline:none}img,object,embed{max-width:100%;height:auto}object,embed{height:100%}img{-ms-interpolation-mode:bicubic}#map_canvas img,#map_canvas embed,#map_canvas object,.map_canvas img,.map_canvas embed,.map_canvas object{max-width:none !important}.left{float:left !important}.right{float:right !important}.text-left{text-align:left !important}.text-right{text-align:right !important}.text-center{text-align:center !important}.text-justify{text-align:justify !important}.hide{display:none}img{display:inline-block}textarea{height:auto;min-height:50px}select{width:100%}.row{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.row .column,.row .columns{position:relative;padding-left:0.9375em;padding-right:0.9375em;width:100%}.row.collapse .column,.row.collapse .columns{position:relative;padding-left:0;padding-right:0}.row .row{width:auto;margin-left:-0.9375em;margin-right:-0.9375em;margin-top:0;margin-bottom:0;max-width:none;*zoom:1}.row .row:before,.row .row:after{content:" ";display:table}.row .row:after{clear:both}.row .row.collapse{width:auto;margin:0;max-width:none;*zoom:1}.row .row.collapse:before,.row .row.collapse:after{content:" ";display:table}.row .row.collapse:after{clear:both}@media only screen{.row .column,.row .columns{position:relative;padding-left:0.9375em;padding-right:0.9375em;float:left}.row .small-1{position:relative;width:8.33333%}.row .small-2{position:relative;width:16.66667%}.row .small-3{position:relative;width:25%}.row .small-4{position:relative;width:33.33333%}.row...

JavaScript

'use strict';

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


app.controller('NavCtrl', ['$scope', '$location', function ($scope, $location) {
  $scope.breadcrumbs = [];
  $scope.menu =   [
        {text: 'HOME', href:'/app/index.html', children: [
            {text:'MANAGE Dashboard', href:'/dashb'}
          ]
          },
        {text: 'MANAGE', href:'/manage', children: [
          {text:'MANAGE PEOPLE', href:'/manage-people', children: [
              {text:'MANAGE STAFF', href:'/manage-staff'},
              {text:'MANAGE CLIENTS', href:'/manage-clients'}              
            ]}
        ]},
        {text: 'REPORTS', href:'/reports', children: [
          {text: 'REPORT NUMERO UNO', href: '#'},
          {text: 'REP NUMERO 2', href: '#', children: [{text:'Third Tier', href: '#'}, {text:'Another Third Tier', href: '#', children: [
              {text:'SUB SUB NAV', href:'#'}
            ]}]}
        ]},
        {text: 'MY INFO', href:'/my-info' },
      ]

  
}]);
    

/* Directives */


app.directive('navMenu', ['$parse', '$compile', function($parse, $compile) {
    return {
        restrict: 'C', //Element
        scope:true,
        link: function (scope, element, attrs)
        {
            scope.selectedNode = null;

            scope.$watch( attrs.menuData, function(val)
            {

                var template = angular.element('<ul id="parentTreeNavigation"><li ng-repeat="node in ' + attrs.menuData + '" ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" >{{node.text}}</a><sub-navigation-tree></sub-navigation-tree></li></ul>');

                var linkFunction = $compile(template);
                linkFunction(scope);
                element.html(null).append( template );

            }, true );
        }
    };
}])
.directive('subNavigationTree', ['$compile', function($compile)
{
    return {
        restrict:...