Buy now
Navbar
Responsive navigation header that includes support for branding, navigation, and more.
Add class navbar-sticky to navbar to make it stick to the top of the page when scrolling.
Navbar components
<!-- Basic navbar: Button (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
<div class="container px-0 px-xl-3">
<a class="navbar-brand order-lg-1 me-0 pe-lg-3 me-lg-4" href="#">
<img src="path-to-logo" alt="Logo" width="130">
</a>
<div class="d-flex align-items-center order-lg-3">
<a class="btn btn-primary d-sm-inline-block d-none ms-3" href="#">Sign up</a>
<button class="navbar-toggler ms-2 me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse1" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<nav class="collapse navbar-collapse order-lg-2" id="navbarCollapse1">
<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="#">Link</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 link</a>
</li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">Yet another link</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Another action</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Basic navbar: Media toolbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
<div class="container px-0 px-xl-3">
<a class="navbar-brand order-lg-1 me-0 pe-lg-3 me-lg-4" href="#">
<img src="path-to-logo" alt="Logo" width="130">
</a>
<div class="d-flex align-items-center order-lg-3">
<a class="d-flex navbar-tool" href="tel:(405)555-0128">
<i class="navbar-tool-icon ci-iphone"></i>
<div class="ms-2 ps-1">
<h6 class="navbar-tool-title">Call us</h6>
<span class="navbar-tool-label">(405) 555-0128</span>
</div>
</a>
<a class="d-flex navbar-tool" href="mailto:[email protected]">
<i class="navbar-tool-icon ci-chat"></i>
<div class="ms-2 ps-1">
<h6 class="navbar-tool-title">Talk to us</h6>
<span class="navbar-tool-label">[email protected]</span>
</div>
</a>
<button class="navbar-toggler ms-2 me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse2" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<nav class="collapse navbar-collapse order-lg-2" id="navbarCollapse2">
<!-- Site menu goes here. See example above -->
</nav>
</div>
</header>
<!-- Basic navbar: Toolbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
<div class="container px-0 px-xl-3">
<a class="navbar-brand order-lg-1 me-0 pe-lg-3 me-lg-4" href="#">
<img src="path-to-logo" alt="Logo" width="130">
</a>
<div class="d-flex align-items-center order-lg-3">
<ul class="nav nav-tools flex-nowrap">
<li class="nav-item align-self-center d-md-block d-none mb-0">
<a class="nav-tool" href="#">
<i class="ci-heart nav-tool-icon"></i>
<span class="nav-tool-label">2</span>
</a>
</li>
<li class="divider-vertical d-md-block d-none"></li>
<li class="nav-item align-self-center mb-0">
<a class="nav-tool pe-lg-0" href="#">
<i class="ci-cart nav-tool-icon"></i>
<span class="badge bg-success align-middle mt-n1 ms-2 px-2 py-1 fs-xs">4</span>
</a>
</li>
<li class="divider-vertical d-lg-none d-block"></li>
<li class="nav-item mb-0">
<button class="navbar-toggler mt-n1 me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse3" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
</li>
</ul>
</div>
<nav class="collapse navbar-collapse order-lg-2" id="navbarCollapse3">
<!-- Site menu goes here. See example above -->
</nav>
</div>
</header>
<!-- Basic navbar: Search + toolbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
<div class="container px-0 px-xl-3">
<a class="navbar-brand order-lg-1 me-0 pe-lg-3 me-lg-4" href="#">
<img src="path-to-logo" alt="Logo" width="130">
</a>
<div class="input-group ms-4 d-lg-block d-none order-lg-3" style="max-width: 21rem;">
<i class="ci-search position-absolute top-50 end-0 translate-middle-y me-3 lead zindex-1"></i>
<input class="form-control w-100 rounded" type="text" placeholder="Search for products...">
</div>
<div class="d-flex align-items-center order-lg-3">
<ul class="nav nav-tools flex-nowrap">
<li class="nav-item align-self-center d-lg-block d-none mb-0">
<a class="nav-tool" href="#">
<i class="ci-heart nav-tool-icon"></i>
<span class="nav-tool-label">2</span>
</a>
</li>
<li class="divider-vertical d-lg-block d-none"></li>
<li class="nav-item mb-0">
<a class="nav-tool align-self-center pe-lg-0" href="#">
<i class="ci-cart nav-tool-icon"></i>
<span class="badge bg-success align-middle mt-n1 ms-2 px-2 py-1 fs-xs">4</span>
</a>
</li>
<li class="divider-vertical d-lg-none d-block"></li>
<li class="nav-item mb-0">
<button class="navbar-toggler mt-n1 me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse4" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
</li>
</ul>
</div>
<nav class="collapse navbar-collapse order-lg-2" id="navbarCollapse4">
<div class="input-group d-lg-none d-block">
<input class="form-control w-100 ps-5 rounded-0 border-0" type="text" placeholder="Search for products...">
<i class="ci-search fs-lg position-absolute top-50 end-0 translate-middle-y me-3 zindex-5"></i>
</div>
<!-- Site menu goes here. See example above -->
</nav>
</div>
</header>Color schemes
<!-- Dark navbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-0 px-xl-3">
...
</div>
</header>
<!-- Primary navbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container px-0 px-xl-3">
...
</div>
</header>
<!-- Gray navbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-secondary">
<div class="container px-0 px-xl-3">
...
</div>
</header>Topbar
Eng / $
Français / €
Deutsch / €
Italiano / €<!-- Light topbar -->
<div class="topbar bg-secondary">
<div class="container d-flex justify-content-between px-0 px-xl-3">
<div>
<a class="topbar-link d-md-inline-block d-none" href="tel:(405)555-0128">
Available 24/7 at
<span class='fw-bold'>(405) 555-0128</span>
</a>
<a class="topbar-link d-md-none d-inline-block" href="tel:(405)555-0128">
<i class="ci-iphone me-1 align-middle"></i>
(405) 555-0128
</a>
</div>
<div>
<div class="dropdown">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<img class="me-2" src="path-to-flag-image" width="20" alt="English">
Eng / $
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
<img class="me-2" src="path-to-flag-image" width="20" alt="Français">
Français / €
</a>
<a class="dropdown-item" href="#">
<img class="me-2" src="path-to-flag-image" width="20" alt="Deutsch">
Deutsch / €
</a>
<a class="dropdown-item" href="#">
<img class="me-2" src="path-to-flag-image" width="20" alt="Italiano">
Italiano / €
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Dark topbar -->
<div class="topbar topbar-dark bg-dark">
<div class="container d-flex justify-content-between px-0 px-xl-3">
...
</div>
</div>Topbar + Navbar
<!-- 2-level header: Topbar + Navbar -->
<header>
<!-- Topbar -->
<div class="topbar topbar-dark bg-dark">
<div class="container d-flex justify-content-between px-0 px-xl-3">
...
</div>
</div>
<!-- Navbar -->
<div class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
<div class="container px-0 px-xl-3">
...
</div>
</div>
</header>