JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="navbar navbar-default " role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul id="people" class="nav navbar-nav" data-bind="template: { name: 'personTmpl', foreach: people }">
        </ul>
    </div>
</div>

<script id="personTmpl" type="text/html">
    <li data-bind="css: { dropdown: children().length > 0 }">
        <a href="#" data-bind="text: name(), visible: children().length < 1"></a>

        <a href="#" class="dropdown-toggle" data-bind="visible: children().length > 0" 
           data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <span data-bind="text: name"></span>
            <span class="caret"></span>
        </a>

        <ul class="dropdown-menu" data-bind="template: { name: 'personTmpl', foreach: children }"></ul>
    </li>
</script>

JavaScript

$(function () {
    var Person = function (name, children) {
        this.name = ko.observable(name);
        this.children = ko.observableArray(children || []);
    };
    
    
    var PeopleModel = function () {
        this.people = ko.observableArray([
            new Person("Bob", [
                new Person("Jan"),
                new Person("Don", [
                    new Person("Ted"),
                    new Person("Ben", [
                        new Person("Joe", [
                            new Person("Ali"),
                            new Person("Ken")
                        ])
                    ]),
                    new Person("Doug")
                ])
            ]),
            new Person("Ann", [
                new Person("Eve"),
                new Person("Hal")
            ])
        ]);

        this.addChild = function (name, parentArray) {
            parentArray.push(new Person(name));
        };
    };

    ko.applyBindings(new PeopleModel());
});