JSFiddle - React, Tailwind, and code Playground

by Neeraj Sonar

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<body ng-app="rcfdto">
    <div class="menu container" ng-controller="menuController">
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li> <input type=""text ng-model="query" /></li>
            <li ng-repeat="loc in locs | filter: query" ng-class="{'dropdown-submenu' : loc.submenu && loc.submenu.length}"> <a href="{{loc.link}}" id="{{loc.id}}">{{loc.name}}</a>

                <ul ng-if="loc.submenu && loc.submenu.length" class="dropdown-menu">
                    <li ng-repeat="subloc in loc.submenu"> <a href="{{subloc.link}}" id="{{subloc.id}}">{{subloc.name}}</a>

                        <ul ng-if="subloc.subsubmenu && subloc.subsubmenu.length" class="dropdown-menu">
                            <li ng-repeat="subsubloc in subloc.subsubmenu"> <a href="{{subsubloc.link}}" id="{{subsubloc.id}}">{{subsubloc.name}}</a>

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

CSS

.menu {
    position:relative;
}
.menu > .dropdown-menu {
    position:static;
    display:block;
}

JavaScript

var App = angular.module("rcfdto", []);

App.controller("menuController", ['$scope', function ($scope) {
    $scope.locs = [{
        name: "Menu Option #1",
        link: "#OP1",
        id: "Option1",
        submenu: null
    }, {
        name: "Menu Option #2",
        link: "#OP2",
        id: "Option2",
        submenu: [{
            name: "Submenu Option 1",
            link: "#SOP1",
            id: "SubOption1",
            subsubmenu: null
        }, {
            name: "Submenu Option 2",
            link: "#SOP2",
            id: "SubOption2",
            subsubmenu: null
        }, {
            name: "Submenu Option 3",
            link: "#SOP3",
            id: "SubmenuOption3",
            subsubmenu: [{
                name: "SubSubMenu Option 1",
                link: "#SSOP1",
                id: "SubSubmenuOption1"
            }, {
                name: "SubSubMenu Option 2",
                link: "#SSOP2",
                id: "SubSubmenuOption2"
            }]
        }]
    }, {
        name: "Menu Option #3",
        link: "#OP3",
        id: "Option3",
        submenu: [{
            name: "Submenu Option 4",
            link: "#SOP4",
            id: "SubmenuOption4",
            subsubmenu: [{
                name: "SubSubMenu Option 3",
                link: "#SSOP3",
                id: "SubSubmenuOption3"
            }]
        }, {
            name: "Submenu Option 5",
            link: "#SOP5",
            id: "SubmenuOption5",
            submenu: null
        }]
    }];
}]);