Navigation Barcomponent

Navigation Bar is represented navigation component for creating menu.

<nav class="navigation-bar dark">
    <nav class="navigation-bar-content">
        <item class="element">...</item>
        <item class="element-divider">...</item>
        ...
        <item class="element">...</item>
    </nav>
</nav>

Navigator Bar element can be: <a>, <div>, <span>, etc. Complex element (example input-control) must be included in div with .element class. For creating divider you must add span with .element-divider class. For placing element right you must add class .place-right to element.

<nav class="navigation-bar">
    <nav class="navigation-bar-content">
        <div class="element">
            <a class="dropdown-toggle" href="#">METRO UI CSS</a>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="#">Main</a></li>
                <li><a href="#">File Open</a></li>
                <li class="divider"></li>
                <li><a href="#">Print...</a></li>
                <li class="divider"></li>
                <li><a href="#">Exit</a></li>
            </ul>
        </div>

        <span class="element-divider"></span>
        <a class="element brand" href="#"><span class="icon-spin"></span></a>
        <a class="element brand" href="#"><span class="icon-printer"></span></a>
        <span class="element-divider"></span>

        <div class="element input-element">
            <form>
                <div class="input-control text">
                    <input type="text" placeholder="Search...">
                    <button class="btn-search"></button>
                </div>
            </form>
        </div>

        <div class="element place-right">
            <a class="dropdown-toggle" href="#">
                <span class="icon-cog"></span>
            </a>
            <ul class="dropdown-menu place-right" data-role="dropdown">
                <li><a href="#">Products</a></li>
                <li><a href="#">Download</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="#">Buy Now</a></li>
            </ul>
        </div>
        <span class="element-divider place-right"></span>
        <a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
        <span class="element-divider place-right"></span>
        <button class="element image-button image-left place-right">
            Sergey Pimenov
            <img src="images/211858_100001930891748_287895609_q.jpg"/>
        </button>
    </nav>
</nav>

You can create fixed (top or bottom) navigation bar with built in subclasses .fixed-top, .fixed-bottom.

<nav class="navigation-bar fixed-top">...</nav>
<nav class="navigation-bar fixed-bottom">...</nav>

Additional color subclasses

Navigation Bar with dark subclass

<nav class="navigation-bar dark">...</nav>

Navigation Bar with light subclass

<nav class="navigation-bar light">...</nav>