Bootstrap Navbar

The Navbar is one of the most essential components of any modern website. Bootstrap provides a robust, built-in navigation header that is highly customizable, collapses automatically on smaller screens, and comes packed with features like branding, dropdowns, forms, and search bars.

Anatomy of a Bootstrap Navbar

Before diving into the code, it's important to understand the fundamental building blocks of a Bootstrap 5 Navbar:

• .navbar: The core wrapper class that defines a navigation bar.
• .navbar-expand-lg: A responsive class that tells the navbar when to collapse (e.g., behind a hamburger icon on smaller screens).
• .navbar-brand: Used for your company name, logo, or project title.
• .navbar-toggler: The classic "hamburger" button that appears on mobile devices to toggle the hidden menu.
• .collapse .navbar-collapse: The wrapper for the actual navigation links that need to be hidden and toggled on smaller screens.
• .navbar-nav: The list navigation class designed specifically for the navbar layout.

Basic Responsive Navbar Example

Here is a complete example of a standard, responsive navbar. If you view this on a large screen, the links line up horizontally. If you resize your browser to a mobile width, the links will vanish, and a hamburger icon will take their place.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <!-- Brand Name / Logo -->
        <a class="navbar-brand" href="#">MyBrand</a>
        
        <!-- Mobile Hamburger Toggle -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#basicNavDemo">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Collapsible Content -->
        <div class="collapse navbar-collapse" id="basicNavDemo">
            <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="#">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Navbar Color Schemes

Changing the color of your navbar in Bootstrap is incredibly easy. You just mix and match background utility classes (like .bg-dark, .bg-primary, or .bg-success) with a theme class.

• .navbar-light: For use with light background colors. It ensures the text and hamburger toggle are dark.
• .navbar-dark: For use with dark background colors. It makes the text and hamburger toggle white/light.

<!-- Dark Navbar -->
<nav class="navbar navbar-dark bg-dark">...</nav>

<!-- Primary Blue Navbar -->
<nav class="navbar navbar-dark bg-primary">...</nav>

Adding Dropdowns and Forms

A navbar often needs more than just simple links. You can effortlessly integrate Dropdowns and inline Forms (like a search bar).

To implement this, simply nest a standard Bootstrap dropdown structure inside an <li class="nav-item dropdown"> list item. For the search bar, use a <form class="d-flex"> placed next to your links.