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>