Bootstrap Navbars

Bootstrap navbars are a fundamental component for building responsive and feature-rich navigation headers in your web applications.

A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection

Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page.

Basic Navbar

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xxl|xl|lg|md|sm (stacks the navbar vertically on xxlarge, extra large, large, medium or small screens).

To add links inside the navbar, use either an <ul> element (or a <div>) with class="navbar-nav". Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class:

Example:
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid"> <ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div> </nav>

Vertical Navbar

Remove the .navbar-expand-* class to create a navigation bar that will always be vertical:

Example:
<nav class="navbar bg-light">
...
</nav>

Centered Navbar

Add the .justify-content-center class to center the navigation bar:

Example:
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>

Colored Navbar

Use any of the .bg-color classes to change the background color of the navbar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light)

Example:
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div> </nav>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Brand / Logo

The .navbar-brand class is used to highlight the brand/logo/project name of your page:

Example:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>

Navbar Text

Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).

Example:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">Navbar text</span> </div> </nav>

Navbar With Dropdown

Navbars can also hold dropdown menus:

Example:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>

Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page.

A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

The .fixed-top class makes the navigation bar fixed at the top:

Example:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>