W3CoreUI

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. Click here

Default Navbar

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.


<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
	<a class="navbar-brand" href="javascript:void(0);">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="javascript:void(0);">Home</a>
		</li>
		<li class="nav-item">
		  <a class="nav-link" href="javascript:void(0);">Link</a>
		</li>
		<li class="nav-item dropdown">
		  <a class="nav-link dropdown-toggle" href="javascript:void(0);" role="button" data-bs-toggle="dropdown" aria-expanded="false">
			Dropdown
		  </a>
		  <ul class="dropdown-menu">
			<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
			<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
			<li><hr class="dropdown-divider"></li>
			<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
		  </ul>
		</li>
		<li class="nav-item">
		  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
		</li>
	  </ul>
	  <form class="d-flex" role="search">
		<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
		<button class="btn btn-outline-success" type="submit">Search</button>
	  </form>
	</div>
  </div>
</nav>

Brand with Text

Add your text within an element with the .navbar-brand class.


<!-- As a link -->
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
	<a class="navbar-brand" href="javascript:void(0);">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
	<span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Image and text

You can also make use of some additional utilities to add an image and text at the same time. Note the addition of .d-inline-block and .align-text-top on the <img>.


<nav class="navbar bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="javascript:void(0);">
      <img src="assets/images/technology/bootstrap.png" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
	<a class="navbar-brand" href="javascript:void(0);">
	  <img src="assets/images/technology/bootstrap.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
	  Bootstrap
	</a>
  </div>
</nav>

Nav

Please note that you should also add the aria-current attribute on the active .nav-link.


<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
	<a class="navbar-brand" href="javascript:void(0);">Navbar</a>
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
	  <span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNav">
	  <ul class="navbar-nav">
		<li class="nav-item">
		  <a class="nav-link active" aria-current="page" href="javascript:void(0);">Home</a>
		</li>
		<li class="nav-item">
		  <a class="nav-link" href="javascript:void(0);">Features</a>
		</li>
		<li class="nav-item">
		  <a class="nav-link" href="javascript:void(0);">Pricing</a>
		</li>
		<li class="nav-item">
		  <a class="nav-link disabled" aria-disabled="true">Disabled</a>
		</li>
	  </ul>
	</div>
  </div>
</nav>

Color schemes

Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass and CSS variables. The default is our “light navbar” for use with light background colors, but you can also apply data-bs-theme="dark" to the .navbar parent for dark background colors. Then, customize with .bg-* and additional utilities.


<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar bg-primary" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

External content

Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the .navbar . Because our plugin works on the id and data-bs-target matching, that’s easily done!

Collapsed content

Toggleable via the navbar brand.


<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
  <div class="bg-dark p-4">
	<h5 class="text-body-emphasis h4">Collapsed content</h5>
	<span class="text-body-secondary">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
	  <span class="navbar-toggler-icon"></span>
	</button>
  </div>
</nav>

Offcanvas

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 bg-body-tertiary fixed-top">
  <div class="container-fluid">
	<a class="navbar-brand" href="javascript:void(0);">Offcanvas navbar</a>
	<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
	  <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" 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">
		  <li class="nav-item">
			<a class="nav-link active" aria-current="page" href="javascript:void(0);">Home</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="javascript:void(0);">Link</a>
		  </li>
		  <li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="javascript:void(0);" role="button" data-bs-toggle="dropdown" aria-expanded="false">
			  Dropdown
			</a>
			<ul class="dropdown-menu">
			  <li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
			  <li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
			  <li>
				<hr class="dropdown-divider">
			  </li>
			  <li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
			</ul>
		  </li>
		</ul>
		<form class="d-flex mt-3" role="search">
		  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
		  <button class="btn btn-outline-success" type="submit">Search</button>
		</form>
	  </div>
	</div>
  </div>
</nav>