Feature request: user menu in navigation bar

[JohnArcher]

Hi!

I would like to usethe user dropdown menu known from the start page also in an navigation bar. My code looks like this:

<div class="metrouicss">
    <div class="page fixed-header">
        <div class="nav-bar bg-color-grayDark">
            <div class="nav-bar-inner">

                <a href="index.php"><span class="element brand">Start</span></a>

                <span class="divider"></span>

                <ul class="menu">
                    <div data-role="dropdown" id="user-menu">

                            <div class="user-login">
                                <div class="name">
                                    <span class="first-name">firstname</span>
                                    <span class="last-name">lastname</span>
                                </div>
                                <div class="avatar">
                                    <i class="icon-user-3 fg-color-white"></i>
                                </div>
                            </div>

                        <ul class="dropdown-menu">
                            <li><a href"#">Mandant wählen</a></li>
                            <li><a href"#">Passwort ändern</a></li>
                            <li class="divider"></li>
                            <li><a href="index.php?site=logout">Abmelden</a></li>
                        </ul>
                    </div>
                </ul>

The result, unfortunately, looks like this:

So, are there any chances to implement user menu support in nav bars? Would be great, thanks a lot in advance! Спасибо! :-)

Regards

[Nikandros]

Hello, Any update on this request?. I am trying to implement the login/logout/change password functionality on the navigation bar as well. Thanks,

[samscudder]

Just adding a dropdown-toggle to a navigation-bar element worked for me... here's a snippet:

<nav class="navigation-bar fixed-top" role="navigation">
    <div class="navigation-bar-content">
        <div class="element place-right">
            <a class="dropdown-toggle"><i class="icon-cog"></i></a>
            <ul class="dropdown-menu place-right" data-role="dropdown" data-effect="none">
                <li><a href="/account">My Account</a></li>
                <li><a href="/support">Support</a></li>
                <li class="divider"></li>
                <li><a href="/logout">Logout</a></li>
            </ul>
        </div>
    </div>
</nav>

[Nikandros]

Thanks Samscudder, That works, but I was looking to do something like this: http://bootsnipp.com/snippets/featured/admin-nav-bar-with-popup-sign-in

[samscudder]

I see... So you want to be able to have a "form dropdown" with inputs.

[Nikandros]

Yes, that is the idea...

[Nikandros]

I have it almost done with the following code, but there are still some issues with the styles... If I could define a proper class for the form, all the internal elements should behave as expected.

        <div class="element place-right">
        <a class="dropdown-toggle"><i class="icon-cog"></i></a>
        <ul class="dropdown-menu place-right" data-role="dropdown" data-effect="none">
            <li class="dropdown">
                <form method="post" action="login" accept-charset="UTF-8" id="frm_login" class="bg-white" style="padding:15px;" >
                    <fieldset>
                        <legend >Login:</legend>
                        <div class="input-control text" data-role="input-control">
                            <input type="text" placeholder="Username" id="username" name="username" style="margin-bottom: 5px;" >
                            <button class="btn-clear" tabindex="-1"></button>
                        </div> 
                        <div class="input-control password" data-role="input-control password">
                            <input type="password" placeholder="Password" id="password" name="password" style="margin-bottom: 10px;" autofocus>
                            <button class="btn-reveal" tabindex="-1"></button>
                        </div> 
                        <div class="input-control checkbox" data-role="input-control"  style="margin-bottom: 5px;">
                            <label>
                                <input type="checkbox" checked name="remember-me" id="remember-me" />
                                <span class="check"></span>
                                Remember me
                            </label>
                        </div>

                        <button class="image-button primary place-right" type="submit" id="btn_login" form="frm_login" value="login">
                        Login
                         <i class="icon-enter bg-cobalt fg-white"></i>
                        </button>
                    </fieldset>
                </form>   
            </li>
        </ul>
        </div>