Implements default Bootstrap navbar component with minor enhancements
(eg. .navbar-primary
modification or .navbar-icon
for icon items).
Fixed navbar
Add
.has-navbar-fixed-top
class to <body>
when using .navbar-fixed-top
modification to ensure the content
does not hide below navbar.
Example
<!-- Main navigation -->
<nav class="navbar navbar-static-top navbar-primary">
<div class="container">
<!-- Brand and menu toggle -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#kssMenu">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand offset-right-large" title="Bootstrap UI">Bootstrap UI</a>
</div>
<!-- Collapsible menu -->
<div class="collapse navbar-collapse" id="kssMenu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Dashboard</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Users</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-icon">
<a href="#" target="_blank" title="Open site in a new tab">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<span class="visible-xs">Home</span>
</a>
</li>
<li class="navbar-icon">
<a href="#" title="Settings">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
<span class="visible-xs">Settings</span>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="My profile">
<span class="glyphicon glyphicon-user offset-right" aria-hidden="true"></span>
<span class="visible-xs-inline offset-right">My Profile</span>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">James Brown</li>
<li class="divider"></li>
<li>
<a href="#">
<span class="glyphicon glyphicon-user offset-right icon-shift-down" aria-hidden="true"></span>
My Account
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-off offset-right icon-shift-down" aria-hidden="true"></span>
Sign out
</a>
</li>
</ul>
</li><!-- .dropdown -->
</ul><!-- .nav -->
</div><!-- .collapsible -->
</div><!-- .container -->
</nav>