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>
<nav class="navigation-bar dark">...</nav> <nav class="navigation-bar light">...</nav> <nav class="navigation-bar white">...</nav>