Skip to main content

Navbar

Create a responsive navigation bar.

<nav class="navbar navbar-expand-md navbar-light py-3" aria-label="Demo 1">
<div class="container">
<a href="#" class="navbar-brand text-uppercase">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars fa-lg"></i>
</button>
<div class="collapse navbar-collapse py-3 py-md-0" id="navbar-1">
<div class="navbar-nav ms-auto">
<div class="dropdown">
<a class="nav-link dropdown-toggle px-md-3" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services<i class="fas fa-angle-down ms-2" aria-hidden="true"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Service 1</a>
<a class="dropdown-item" href="#">Service 2</a>
<a class="dropdown-item" href="#">Service 3</a>
</div>
</div>
<a class="nav-link px-md-3" href="#">Pricing</a>
<a class="nav-link px-md-3" href="#">About</a>
</div>
<a class="btn btn-outline-primary btn-sm rounded-pill mt-3 mt-md-0 ms-md-3" href="#">Sign Up</a>
</div>
</div>
</nav>

Other navbars

Bootstrap Documentation