Navbar

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.

Default Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
															<div class="container-fluid">
																<a class="navbar-brand" href="#">Navbar</a>
																<button
																	class="navbar-toggler"
																	type="button"
																	data-bs-toggle="collapse"
																	data-bs-target="#navbarSupportedContent"
																	aria-controls="navbarSupportedContent"
																	aria-expanded="false"
																	aria-label="Toggle navigation"
																>
																	<span class="navbar-toggler-icon"></span>
																</button>
																<div class="collapse navbar-collapse" id="navbarSupportedContent">
																	<ul class="navbar-nav me-auto mb-2 mb-lg-0">
																		<li class="nav-item">
																			<a class="nav-link active" aria-current="page" href="#">Home</a>
																		</li>
																		<li class="nav-item">
																			<a class="nav-link" href="#">Link</a>
																		</li>
																		<li class="nav-item dropdown">
																			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
																			<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
																				<li><a class="dropdown-item" href="#">Action</a></li>
																				<li><a class="dropdown-item" href="#">Another action</a></li>
																				<li>
																					<hr class="dropdown-divider" />
																				</li>
																				<li><a class="dropdown-item" href="#">Something else here</a></li>
																			</ul>
																		</li>
																		<li class="nav-item">
																			<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
																		</li>
																	</ul>
																	<form class="d-flex">
																		<label for="inputFormSearch" class="form-label">Email address</label>
																		<input class="form-control me-2" id="inputFormSearch" name="inputFormSearch" type="search" placeholder="Search" aria-label="Search" />
																		<button class="btn btn-outline-success" type="submit">Search</button>
																	</form>
																</div>
															</div>
														</nav>

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

Offcanvas

Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our .navbar-expand-* classes to create a dynamic and flexible navigation sidebar.

In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the .navbar-expand-* class entirely. 

<nav class="navbar navbar-light bg-light">
																<div class="container-fluid">
																	<a class="navbar-brand fs-3" href="#">Offcanvas navbar</a>
																	<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
																		<span class="navbar-toggler-icon"></span>
																	</button>
																	<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
																		<div class="offcanvas-header">
																			<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
																			<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
																		</div>
																		<div class="offcanvas-body">
																			<ul class="navbar-nav justify-content-end flex-grow-1 pe-3 mb-2">
																				<li class="nav-item">
																					<a class="nav-link active" aria-current="page" href="#">Home</a>
																				</li>
																				<li class="nav-item">
																					<a class="nav-link" href="#">Pages</a>
																				</li>
																				<li class="nav-item">
																					<a class="nav-link" href="#">Shop</a>
																				</li>
																				<li class="nav-item">
																					<a class="nav-link" href="#">Docs</a>
																				</li>
																			</ul>
																			<form class="d-flex">
																				<label for="exampleFormControlInput2" class="form-label">Email address</label>
																				<input class="form-control me-2" id="exampleFormControlInput2" name="exampleFormControlInput2" type="search" placeholder="Search" aria-label="Search" />
																				<button class="btn btn-outline-success" type="submit">Search</button>
																			</form>
																		</div>
																	</div>
																</div>
															</nav>