Bootstrap 5 Navbar

Responsive navigation headers for your website

🎯 What is Bootstrap Navbar?

Bootstrap navbar is a responsive navigation header that adapts to different screen sizes. It includes support for branding, navigation links, forms, and a collapsible hamburger menu for mobile devices, making it essential for modern websites. 


<!-- Basic Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
</nav>

Basic Navbar

A basic Bootstrap navbar creates a responsive navigation header with the .navbar class as its foundation. Include expansion classes like .navbar-expand-lg to control at which breakpoint the navbar collapses into a mobile menu. The .navbar-brand class typically contains your logo or site name. Choose between .container for fixed-width or .container-fluid for full-width layout containers. Add color scheme classes like .navbar-light or .navbar-dark for proper text contrast. This structure creates a professional, accessible navigation system that works across all devices and provides clear site hierarchy for both users and search engine crawlers.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home</a>
      <a class="nav-link" href="#">About</a>
      <a class="nav-link" href="#">Contact</a>
    </div>
  </div>
</nav>

Output:

🔹 Navbar with Toggler

Navbar togglers create collapsible hamburger menus for mobile navigation using Bootstrap's collapse component. Add a button with .navbar-toggler class and the appropriate data-bs-toggle="collapse" and data-bs-target attributes. Wrap navigation links in a .collapse .navbar-collapse div that the toggler controls. On small screens, the toggler appears, hiding the navigation until activated. This responsive pattern ensures optimal mobile usability without sacrificing desktop navigation clarity. The toggler icon automatically includes accessible ARIA attributes when implemented correctly. Responsive navigation improves mobile user experience, a critical ranking factor in Google's mobile-first indexing approach.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <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" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Output:

🔹 Navbar Color Schemes

Bootstrap provides predefined color schemes for navbars using background and text contrast utilities. Combine .navbar-light with light background colors or .navbar-dark with dark backgrounds to ensure proper text readability. Add background utilities like .bg-primary, .bg-success, .bg-danger, or custom colors to match your brand identity. Proper contrast ratios are essential for accessibility compliance (WCAG guidelines) and user experience. Well-designed color schemes improve navigation visibility and create visual hierarchy. From an SEO perspective, accessible navigation contributes to better user engagement metrics and reduces bounce rates, signaling quality to search engines.

<!-- Light Navbar -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Light Navbar</a>
  </div>
</nav>

<!-- Dark Navbar -->
<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Primary Navbar</a>
  </div>
</nav>

<!-- Custom Color -->
<nav class="navbar navbar-dark" style="background-color: #563d7c;">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Custom Color</a>
  </div>
</nav>

🔹 Navbar with Dropdown

Navbar dropdowns organize related navigation items under category headings using Bootstrap's dropdown component. Create dropdowns by adding .nav-item .dropdown classes to a list item, with a trigger link containing .dropdown-toggle and data-bs-toggle="dropdown" attributes. The dropdown menu appears below or above the trigger when clicked. This pattern is ideal for sites with extensive navigation structures, helping users find related content efficiently. Dropdowns improve information architecture by categorizing content logically. For SEO, ensure dropdown content is accessible to search engine crawlers and consider implementing structured data for complex navigation menus to help search engines understand your site structure.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
          Services
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Web Design</a></li>
          <li><a class="dropdown-item" href="#">Development</a></li>
          <li><a class="dropdown-item" href="#">Marketing</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

🔹 Navbar with Form

Navbars can integrate search forms or other input elements directly within the navigation structure. Use .d-flex utility classes to align form elements horizontally within the navbar. Add spacing utilities like .me-2 for proper element separation. This pattern creates seamless user experiences for search functionality, newsletter sign-ups, or login forms without requiring separate pages. Integrated forms keep users engaged with primary navigation while providing immediate access to functionality. For SEO, ensure search forms are accessible and consider implementing site search structured data. Well-designed navbar forms improve user engagement by reducing friction in common tasks like searching or logging in.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

🔹 Fixed Navbar

Fixed navbars remain visible during scrolling using .fixed-top or .fixed-bottom positioning classes. This creates persistent navigation access regardless of page position, improving usability for long-scrolling pages. When using fixed positioning, add padding to the top or bottom of the body element to prevent content from hiding behind the navbar. Fixed navigation reduces user frustration by eliminating the need to scroll back to access navigation. From an SEO perspective, improved navigation accessibility contributes to better user engagement metrics like time-on-page and pages-per-session. Ensure fixed elements don't create accessibility issues on mobile devices with limited screen space.

<!-- Fixed to top -->
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed Top</a>
  </div>
</nav>

<!-- Fixed to bottom -->
<nav class="navbar navbar-dark bg-dark fixed-bottom">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed Bottom</a>
  </div>
</nav>

🧠 Test Your Knowledge

Which class makes a navbar stick to the top?