Bootstrap 5 Framework

Navbars

14 min Lesson 22 of 40

Navbars in Bootstrap 5

Bootstrap navbars are responsive, powerful navigation headers with support for branding, navigation links, collapse functionality, and more.

1. Basic Navbar Structure

A navbar requires a .navbar class along with color scheme and responsive behavior classes:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <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>
        

Note: The navbar-expand-* classes determine when the navbar collapses (sm, md, lg, xl, xxl).

2. Navbar Brand

The navbar brand can be text, an image, or both:

<!-- Text Brand -->
<a class="navbar-brand" href="#">MyBrand</a>

<!-- Image Brand -->
<a class="navbar-brand" href="#">
    <img src="logo.png" alt="Logo" height="30">
</a>

<!-- Image + Text -->
<a class="navbar-brand" href="#">
    <img src="logo.png" alt="Logo" height="30" class="d-inline-block align-text-top">
    MyBrand
</a>
        

3. Navbar Navigation

Navigation links use the .nav-link class within .navbar-nav:

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button"
           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>
        </ul>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>
        

4. Responsive Navbar with Toggler

The navbar toggler button appears on small screens to collapse/expand navigation:

<button class="navbar-toggler" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarCollapse"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarCollapse">
    <!-- Navbar content here -->
</div>
        

Tip: The data-bs-target must match the ID of the collapsible navbar content.

5. Color Schemes

Bootstrap provides built-in color schemes for navbars:

<!-- Light Navbar -->
<nav class="navbar navbar-light bg-light">...</nav>

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

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

<!-- Custom Color -->
<nav class="navbar navbar-dark" style="background-color: #563d7c;">...</nav>
        

Note: Use navbar-light with light backgrounds and navbar-dark with dark backgrounds for proper contrast.

6. Navbar Positioning

Control navbar placement with positioning utilities:

<!-- Fixed Top -->
<nav class="navbar fixed-top">...</nav>

<!-- Fixed Bottom -->
<nav class="navbar fixed-bottom">...</nav>

<!-- Sticky Top -->
<nav class="navbar sticky-top">...</nav>
        

Warning: When using fixed positioning, add appropriate padding to the body to prevent content from hiding behind the navbar.

7. Navbar Forms

Add forms and search fields directly in the navbar:

<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand">Navbar</a>
        <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>
</nav>
        

8. Navbar Text and Alignment

Add text elements and control alignment:

<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <span class="navbar-text">
            Navbar text with an inline element
        </span>
    </div>
</nav>

<!-- Right Aligned Items -->
<ul class="navbar-nav ms-auto">
    <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
    </li>
</ul>
        

9. Complete Navbar Example

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="logo.png" alt="" height="30"> MyApp
        </a>
        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse" data-bs-target="#mainNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <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 dropdown">
                    <a class="nav-link dropdown-toggle" href="#"
                       data-bs-toggle="dropdown">More</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Another</a></li>
                    </ul>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search">
                <button class="btn btn-outline-light" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>
        

Exercise

Create a responsive navbar that includes:

A brand with logo and text
Navigation links (Home, About, Services, Contact)
A dropdown menu for "Services"
A search form on the right side
Dark color scheme (navbar-dark bg-dark)
Responsive collapse at lg breakpoint