Bootstrap 5 Navbar

The navbar is a responsive navigation header that includes branding, navigation links, and other elements like search bars or buttons. Bootstrap navbars are responsive by default. The navbar-expand-lg class ensures the navbar collapses on smaller screens.

Responsive Navbar

.navbar-expand-sm Collapses on extra small screens.
.navbar-expand-md Collapses on extra medium screens.
.navbar-expand-lg Collapses on large screens.
.navbar-expand-xl Collapses on extra large screens.

Basic Navbar

<nav> => Defines a navigation section.
class="navbar" => Applies Bootstrap's default navbar styling.
navbar-expand-sm => Ensures the navbar remains collapsed only on very small screens but expanded on small screens and larger.
navbar-brand => Defines a brand/logo for the navbar.
navbar-nav => Defines a list of navigation links inside the navbar.
Each <li> represents a menu item.
nav-item => Marks it as a navigation list item.
nav-link => Styles it as a navigation link.

Example

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
     <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link2</a>
      </li>
    </ul>
  </div>
</nav>

Try it Yourself

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). Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text color.

Example

<nav class="navbar navbar-expand-sm bg-light navbar-light">...</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">...</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">...</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">...</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">...</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

Try it Yourself

Navbar with Image Logo

To add an image logo in a navbar, place an <img> inside the .navbar-brand.

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Brand Logo" style="height:60px;">  
    </a>
  </div>
</nav>

Try it Yourself

Navbar with Dropdown

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 <div class="container-fluid">
  <a class="navbar-brand" href="#">
   <img src="logo.png" alt="Brand Logo" style='height:60px;'> 
  </a>
  <ul class="navbar-nav">
   <li class="nav-item">
     <a class="nav-link" href="#">Home</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#">Link1</a>
   </li>
   <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown Link</a>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Link1</a></li>
       <li><a class="dropdown-item" href="#">Link2</a></li>
       <li><a class="dropdown-item" href="#">Link3</a></li>
     </ul>
   </li>
  </ul>
 </div>
</nav>

Try it Yourself

Responsive Navbar

A responsive navbar in Bootstrap 5 adjusts automatically based on screen size. It collapses into a hamburger menu on small screens and expands on larger screens.

Example

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
 <div class="container-fluid">
   <a class="navbar-brand" href="#">
    <img src="logo.png" alt="Brand Logo" style='height:60px;'> 
   </a>
   <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
     <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
     </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Link1</a>
     </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Link2</a>
     </li>
    </ul>
   </div>
 </div>
</nav>

Try it Yourself

Navbar with Forms

A responsive navbar in Bootstrap 5 adjusts automatically based on screen size. It collapses into a hamburger menu on small screens and expands on larger screens.

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 <div class="container-fluid">
   <a class="navbar-brand" href="#">
    <img src="logo.png" alt="Brand Logo" style='height:60px;'> 
   </a>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav  me-auto">
     <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
     </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Link1</a>
     </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Link2</a>
     </li>
    </ul>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" >
      <button class="btn btn-success" type="submit">Search</button>
    </form>
   </div>
 </div>
</nav>

Try it Yourself

Fixed Navbar

A fixed navbar stays visible at the top or bottom of the page even when scrolling. Bootstrap provides two classes to fix the navbar.

.fixed-top Navbar stays at the top while scrolling.
.fixed-bottom Navbar stays at the bottom while scrolling.

Example

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

Try it Yourself