Navbar
The Navbar is a powerful, responsive navigation header. Rence Material applies Google Blue and Material elevation to all Bootstrap navbars.
Primary Navigation!
Standard App Bar
The navbar uses a solid primary color and elevated shadow to stand out as the top-level app surface.
Elevated Header!
HTML
<!-- Material-style Navbar / App Bar -->
<nav class="navbar navbar-expand-md navbar-dark shadow-sm" style="background-color: #152d61;">
<div class="container-fluid px-4">
<!-- Brand -->
<a class="navbar-brand d-flex align-items-center gap-2 fw-normal" href="#">
<div class="bg-white rounded-circle d-flex align-items-center justify-content-center" style="width:28px;height:28px;">
<span style="color:#152d61;font-size:15px;font-weight:700;">M</span>
</div>
Rence Material
</a>
<!-- Hamburger for mobile -->
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Nav links -->
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto mb-2 mb-md-0 align-items-md-center gap-1">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Examples</a></li>
</ul>
</div>
</div>
</nav>