Navbar Documentation and examples for a powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for the collapse plugin.
Examples Show code <!-- Navbar primary -->
<!-- Go Pro -->
<a href= "#" class= "btn btn-block btn-dark text-truncate rounded-0 py-2 d-none d-lg-block" style= "z-index: 1000;" target= "_blank" >
<strong> This is a free demo.</strong> Click here to open the full version →
</a>
<!-- Navbar -->
<nav class= "navbar navbar-expand-lg navbar-light bg-white" >
<div class= "container" >
<!-- Brand -->
<a class= "navbar-brand" href= "../../index.html" >
<img alt= "Image placeholder" src= "../../assets/img/brand/dark.svg" id= "navbar-logo" >
</a>
<!-- Toggler -->
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbarCollapse" aria-controls= "navbarCollapse" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<!-- Collapse -->
<div class= "collapse navbar-collapse" id= "navbarCollapse" >
<ul class= "navbar-nav mt-4 mt-lg-0 ml-auto" >
<li class= "nav-item " >
<a class= "nav-link" href= "index.html" > Overview</a>
</li>
<li class= "nav-item dropdown dropdown-animate" data-toggle= "hover" >
<a class= "nav-link" href= "#" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Pages</a>
<div class= "dropdown-menu dropdown-menu-single" >
<a href= "index.html" class= "dropdown-item" > Homepage</a>
<a href= "about.html" class= "dropdown-item" > About us</a>
<a href= "contact.html" class= "dropdown-item" > Contact</a>
<div class= "dropdown-divider" ></div>
<a href= "login.html" class= "dropdown-item" > Login</a>
</div>
</li>
<li class= "nav-item " >
<a class= "nav-link" href= "../../docs/index.html" > Docs</a>
</li>
</ul>
<!-- Button -->
<a class= "navbar-btn btn btn-sm btn-primary d-none d-lg-inline-block ml-3" href= "#" >
Download Free
</a>
<!-- Mobile button -->
<div class= "d-lg-none text-center" >
<a href= "#" class= "btn btn-block btn-sm btn-warning" > See more details</a>
</div>
</div>
</div>
</nav>