Bootstrap Navbar
A Bootstrap Navbar is a navigation header that is placed at the top of the page. It can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">
. Check this documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Menu
<!-- Navbar Transparent -->
<nav
class="navbar navbar-expand-lg top-0 z-index-3 w-100 shadow-none my-3 navbar-transparent ">
<div class="container">
<a class="navbar-brand text-white " href="" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
Material Kit
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item px-3">
<a class="nav-link">
Pages
</a>
</li>
<li class="nav-item px-3">
<a class="nav-link">
Utilities
</a>
</li>
<li class="nav-item px-3">
<a class="nav-link">
Blocks
</a>
</li>
<li class="nav-item px-3">
<a class="nav-link">
Docs
</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<button class="btn btn-white mb-0">Buy Now</button>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
Examples
<!-- Navbar Dark -->
<nav
class="navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3">
<div class="container">
<a class="navbar-brand text-white" href="" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
Material Kit
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item px-3">
<a class="nav-link text-white opacity-8">
Pages
</a>
</li>
<li class="nav-item px-3">
<a class="nav-link text-white opacity-8">
Utilities
</a>
</li>
<li class="nav-item px-3">
<a class="nav-link text-white opacity-8">
Blocks
</a>
</li>
<li class="nav-item px-3">
<a class="nav-link text-white opacity-8">
Docs
</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<button class="btn bg-gradient-primary mb-0">Buy Now</button>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<!-- Navbar Light -->
<nav
class="navbar navbar-expand-lg navbar-light bg-white z-index-3 py-3">
<div class="container">
<a class="navbar-brand" href="" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
Material Kit
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item px-3">
<a class="nav-link">
Pages
</a>
</li>
<li class="nav-item px-3">
<a class="nav-link">
Utilities
</a>
</li>
<li class="nav-item px-3">
<a class="nav-link">
Blocks
</a>
</li>
<li class="nav-item px-3">
<a class="nav-link ">
Docs
</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<button class="btn bg-gradient-primary mb-0">Buy Now</button>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
</div>