Navigation

Basic Navbar

The default navbar with branding, navigation links, and responsive collapse.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarBasic">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarBasic">
            <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>

Navbar Colors

Apply different background colors and themes to navbars.

Primary Navbar (Dark Theme)

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Primary Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarPrimary">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarPrimary">
            <ul class="navbar-nav me-auto">
                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

Dark Navbar

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

Light Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- navbar content -->
</nav>

Success Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-success">
    <!-- navbar content -->
</nav>

Navbar Placement

Control navbar positioning with fixed or sticky utilities.

Fixed Top

Fixed top navbar sticks to the top of viewport. Add padding-top to body to prevent content overlap.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <!-- navbar content -->
</nav>

<!-- Add padding to body -->
<style>
    body { padding-top: 56px; }
</style>

Fixed Bottom

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

Sticky Top

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
    <!-- navbar content -->
</nav>

Navbar with Forms

Add forms and search functionality to your navbar.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav me-auto">
                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search">
                <button class="btn btn-outline-light" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

Navbar with Dropdown

Include dropdown menus in your navbar navigation.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav me-auto">
                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Navbar with Offcanvas

Use offcanvas component for responsive mobile navigation.

<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Offcanvas Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Menu</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Tabs

Create tabbed navigation with .nav-tabs.

Home tab content

Profile tab content

Contact tab content

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home">Home</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile">Profile</button>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="home">Home content</div>
    <div class="tab-pane fade" id="profile">Profile content</div>
</div>

Pills

Create pill-style navigation with .nav-pills.

<ul class="nav nav-pills">
    <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 disabled">Disabled</a>
    </li>
</ul>

Vertical Pills

<ul class="nav nav-pills flex-column">
    <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>
</ul>

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active">Data</li>
    </ol>
</nav>

Dashboard Navbar

Modern dashboard-style navbar with search, notifications, and user profile dropdown.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <i class="bi bi-speedometer2 me-2"></i>Dashboard
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDashboard">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarDashboard">
            <form class="d-flex mx-auto my-2 my-lg-0" style="max-width: 500px; width: 100%;">
                <div class="input-group">
                    <span class="input-group-text bg-body-secondary border-end-0">
                        <i class="bi bi-search"></i>
                    </span>
                    <input class="form-control border-start-0" type="search" placeholder="Search...">
                </div>
            </form>
            <ul class="navbar-nav ms-auto align-items-center">
                <li class="nav-item dropdown me-3">
                    <a class="nav-link position-relative" href="#" data-bs-toggle="dropdown">
                        <i class="bi bi-bell fs-5"></i>
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><h6 class="dropdown-header">Notifications</h6></li>
                        <li><a class="dropdown-item" href="#">New message</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" data-bs-toggle="dropdown">
                        <img src="avatar.jpg" class="rounded-circle me-2" width="32" height="32">
                        <span>John Doe</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>Profile</a></li>
                        <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Settings</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

E-commerce Navbar

Two-row navbar design with top bar for contact info and main navigation with categories and shopping cart.

+1 (555) 123-4567 support@store.com

Track Order Help

<nav class="navbar navbar-expand-lg p-0 flex-column">
    <!-- Top Bar -->
    <div class="w-100 bg-dark text-white py-2">
        <div class="container-fluid d-flex justify-content-between small">
            <div>
                <i class="bi bi-telephone me-2"></i>+1 (555) 123-4567
                <span class="ms-3"><i class="bi bi-envelope me-2"></i>support@store.com</span>
            </div>
            <div>
                <a href="#" class="text-white text-decoration-none">Track Order</a>
            </div>
        </div>
    </div>
    <!-- Main Navigation -->
    <div class="w-100 bg-primary">
        <div class="container-fluid">
            <div class="d-flex align-items-center py-2">
                <a class="navbar-brand text-white fw-bold" href="#">MyStore</a>
                <div class="dropdown me-3">
                    <button class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
                        Categories
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Electronics</a>
                        <a class="dropdown-item" href="#">Fashion</a>
                    </div>
                </div>
                <form class="d-flex flex-grow-1">
                    <input class="form-control" type="search" placeholder="Search products...">
                </form>
                <a href="#" class="text-white position-relative">
                    <i class="bi bi-cart3"></i>
                    <span class="badge bg-danger">5</span>
                </a>
            </div>
        </div>
    </div>
</nav>

Mega Menu Navbar

Navbar with full-width mega menu dropdown featuring multiple columns of links.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">TechCorp</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item dropdown position-static">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                        Products
                    </a>
                    <div class="dropdown-menu w-100 border-0 shadow-lg p-4">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-3">
                                    <h6 class="text-primary fw-bold mb-3">Software</h6>
                                    <a class="dropdown-item" href="#">Project Management</a>
                                    <a class="dropdown-item" href="#">CRM Solutions</a>
                                </div>
                                <div class="col-md-3">
                                    <h6 class="text-primary fw-bold mb-3">Services</h6>
                                    <a class="dropdown-item" href="#">Consulting</a>
                                </div>
                                <div class="col-md-3">
                                    <div class="card bg-primary text-white">
                                        <div class="card-body">
                                            <h6>Featured Product</h6>
                                            <a href="#" class="btn btn-light btn-sm">Learn More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Glass/Transparent Navbar

Modern glassmorphism navbar with semi-transparent background and backdrop blur effect.

Glassmorphism Design

Transparent navbar with backdrop blur

<style>
.glass-navbar {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-navbar .navbar-brand,
.glass-navbar .nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
}
</style>

<nav class="navbar navbar-expand-lg glass-navbar">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="#">GlassUI</a>
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarGlass">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarGlass">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-outline-light ms-2" href="#">Sign In</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Centered Logo Navbar

Elegant navbar design with centered logo and navigation links split on both sides.

<style>
.centered-logo-navbar .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.centered-logo-navbar .navbar-nav-left {
    margin-right: auto;
}
.centered-logo-navbar .navbar-nav-right {
    margin-left: auto;
}
@media (max-width: 991px) {
    .centered-logo-navbar .navbar-brand {
        position: static;
        transform: none;
    }
}
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-white centered-logo-navbar">
    <div class="container-fluid">
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCentered">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">LUXE</a>
        <div class="collapse navbar-collapse" id="navbarCentered">
            <ul class="navbar-nav navbar-nav-left">
                <li class="nav-item">
                    <a class="nav-link" href="#">Collections</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
            <ul class="navbar-nav navbar-nav-right">
                <li class="nav-item">
                    <a class="nav-link" href="#">Journal</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-dark ms-2" href="#">Shop Now</a>
                </li>
            </ul>
        </div>
    </div>
</nav>