menu.html

<div class="header rcue">
    <div class="navbar utility">
        <div class="navbar-inner clearfix">
            <h1><a href="#"><strong>Keycloak</strong> Central Login</a></h1>
            <ul class="nav pull-right" data-ng-hide="auth.loggedIn">
                <li><a href="/auth-server/rest/saas/login">Login</a></li>
                <li><a href="/auth-server/rest/saas/registrations">Register</a></li>
            </ul>
            <ul class="nav pull-right" data-ng-show="auth.loggedIn">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="icon-user">Icon: user</span>{{auth.user.displayName}}<i class="caret"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Manage Account</a></li>
                        <li class="separator"><a href="/auth-server/rest/saas/logout">Sign Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="navbar primary">
        <div class="navbar-inner clearfix" data-ng-controller="RealmDropdownCtrl">
            <ul class="nav pull-left">
                <li>
                    <span class="dropdown-label" data-ng-show="showNav()">Realm:</span>
                    <div class="dropdown" data-ng-show="showNav()">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">My First Realm</a>
                        <ul class="dropdown-menu">
                            <li class="selected"><a href="#">My First Realm</a></li>
                            <li><a href="#">Another Realm</a></li>
                            <li><a href="#">Some realm with a freaking gigantic name</a></li>
                        </ul>
                    </div>
                    <!-- This component should be replaced by the dropdown-menu above --> <li class="select-rcue" data-ng-show="showNav()"><select ng-change="changeRealm()" ng-model="current.realm" ng-options="r.realm for r in current.realms"></select></li>
                </li>
            </ul>
            <div class="pull-right" data-ng-show="auth.loggedIn">
                <a class="button primary" href="#/create/realm" data-ng-class="path[0] == 'create' && path[1] == 'realm' && 'active'"
                    data-ng-show="auth.loggedIn">Add Realm</a>
            </div>
        </div>
    </div>
</div>