Navbar
Responsive navigation header that includes support for branding, navigation, and more.
Supported content
<!-- Change to .container-fluid for full width navbar -->
<!-- Menu with dropdown + Button -->
<header class="navbar navbar-expand-lg bg-light">
<div class="container">
<a href="#" class="navbar-brand">
<span class="text-primary flex-shrink-0 me-2">
<svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
</svg>
</span>
Around
</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse1" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse" id="navbarCollapse1">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Action link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Action link</a></li>
<li><a href="#" class="dropdown-item">Another action</a></li>
<li><a href="#" class="dropdown-item">Something else here</a></li>
<li><a href="#" class="dropdown-item">Yet another link</a></li>
</ul>
</li>
<li><a href="#" class="dropdown-item">Another action</a></li>
<li class="dropdown-divider"> </li>
<li href="#"><a class="dropdown-item">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<a href="#" class="btn btn-primary btn-sm fs-sm ms-3 mb-4 mb-lg-0">
<i class="ai-user me-2 ms-n1"></i>
Sign up
</a>
</nav>
</div>
</header>
<!-- Menu + Theme mode switch + Button -->
<header class="navbar navbar-expand-lg bg-light">
<div class="container">
<a href="#" class="navbar-brand">
<span class="text-primary flex-shrink-0 me-2">
<svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
</svg>
</span>
Around
</a>
<div class="form-check form-switch mode-switch order-lg-2 me-3 me-lg-4 ms-auto" data-bs-toggle="mode">
<input type="checkbox" class="form-check-input" id="theme-mode">
<label for="theme-mode" class="form-check-label">
<i class="ai-sun fs-lg"></i>
</label>
<label for="theme-mode" class="form-check-label">
<i class="ai-moon fs-lg"></i>
</label>
</div>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse2" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="btn btn-outline-primary btn-sm fs-sm order-lg-3 d-none d-lg-inline-flex">
<i class="ai-login me-2 ms-n1"></i>
Sign in
</a>
<nav class="collapse navbar-collapse" id="navbarCollapse2">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
<a href="#" class="btn btn-outline-primary btn-sm fs-sm d-lg-none ms-3 mb-4 mb-lg-0">
<i class="ai-login me-2 ms-n1"></i>
Sign in
</a>
</nav>
</div>
</header>
<!-- Menu + Search + Account + Shopping cart -->
<header class="navbar navbar-expand-lg bg-light">
<div class="container">
<a href="#" class="navbar-brand">
<span class="text-primary flex-shrink-0 me-2">
<svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
</svg>
</span>
Around
</a>
<div class="nav align-items-center order-lg-2 ms-auto">
<a href="#" class="nav-link fs-4 p-2 mx-sm-1" aria-label="Search">
<i class="ai-search"></i>
</a>
<a href="#" class="nav-link fs-4 p-2 mx-sm-1" aria-label="Account">
<i class="ai-user"></i>
</a>
<a href="#" class="nav-link position-relative fs-4 p-2" aria-label="Cart">
<i class="ai-cart"></i>
<span class="badge bg-primary fs-xs position-absolute end-0 top-0 me-n1" style="padding: .25rem .375rem;">3</span>
</a>
<button type="button" class="navbar-toggler ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse3" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<nav class="collapse navbar-collapse" id="navbarCollapse3">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contacts</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Menu + Contact (Phone / Email) links -->
<header class="navbar navbar-expand-lg bg-light">
<div class="container">
<a href="#" class="navbar-brand">
<span class="text-primary flex-shrink-0 me-2">
<svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
</svg>
</span>
Around
</a>
<div class="d-flex align-items-center order-lg-2 ms-auto">
<a href="tel:4055550128" class="d-flex align-items-center text-decoration-none">
<i class="ai-phone fs-3"></i>
<div class="text-nowrap ps-2 d-none d-lg-block">
<h6 class="fs-sm lh-1 mb-0">Call us</h6>
<span class="text-body fs-xs">(405) 555‑0128</span>
</div>
</a>
<a href="mailto:hello@example.com" class="d-flex align-items-center text-decoration-none ms-4">
<i class="ai-messages fs-3"></i>
<div class="text-nowrap ps-2 d-none d-lg-block">
<h6 class="fs-sm lh-1 mb-0">Chat with us</h6>
<span class="text-body fs-xs">hello@example.com</span>
</div>
</a>
</div>
<button type="button" class="navbar-toggler ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse4" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse" id="navbarCollapse4">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- User logged in state. User account dropdown -->
<header class="navbar navbar-expand-lg bg-light">
<div class="container">
<a href="#" class="navbar-brand">
<span class="text-primary flex-shrink-0 me-2">
<svg version="1.1" width="35" height="32" viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M35.6,29c-1.1,3.4-5.4,4.4-7.9,1.9c-2.3-2.2-6.1-3.7-9.4-3.7c-3.1,0-7.5,1.8-10,4.1c-2.2,2-5.8,1.5-7.3-1.1c-1-1.8-1.2-4.1,0-6.2l0.6-1.1l0,0c0.6-0.7,4.4-5.2,12.5-5.7c0.5,1.8,2,3.1,3.9,3.1c2.2,0,4.1-1.9,4.1-4.2s-1.8-4.2-4.1-4.2c-2,0-3.6,1.4-4,3.3H7.7c-0.8,0-1.3-0.9-0.9-1.6l5.6-9.8c2.5-4.5,8.8-4.5,11.3,0L35.1,24C36,25.7,36.1,27.5,35.6,29z">
</svg>
</span>
Around
</a>
<div class="dropdown nav d-block order-lg-2 ms-auto">
<a href="#" class="nav-link d-flex align-items-center p-0" data-bs-toggle="dropdown" aria-expanded="false">
<img src="assets/img/avatar/01.jpg" class="border rounded-circle" width="48" alt="Isabella Bocouse">
<div class="d-none d-sm-block ps-2">
<div class="fs-xs lh-1 opacity-60">Hello,</div>
<div class="fs-sm dropdown-toggle">Isabella</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end my-1">
<h6 class="dropdown-header fs-xs fw-medium text-body-secondary text-uppercase pb-1">Account</h6>
<a href="#" class="dropdown-item">
<i class="ai-user-check fs-lg opacity-70 me-2"></i>
Overview
</a>
<a href="#" class="dropdown-item">
<i class="ai-settings fs-lg opacity-70 me-2"></i>
Settings
</a>
<a href="#" class="dropdown-item">
<i class="ai-wallet fs-base opacity-70 me-2 mt-n1"></i>
Billing
</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header fs-xs fw-medium text-body-secondary text-uppercase pb-1">Dashboard</h6>
<a href="#" class="dropdown-item">
<i class="ai-cart fs-lg opacity-70 me-2"></i>
Orders
</a>
<a href="#" class="dropdown-item">
<i class="ai-activity fs-lg opacity-70 me-2"></i>
Earnings
</a>
<a href="#" class="dropdown-item d-flex align-items-center">
<i class="ai-messages fs-lg opacity-70 me-2"></i>
Chat
<span class="badge bg-danger ms-auto">4</span>
</a>
<a href="#" class="dropdown-item">
<i class="ai-heart fs-lg opacity-70 me-2"></i>
Favorites
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="ai-logout fs-lg opacity-70 me-2"></i>
Sign out
</a>
</div>
</div>
<button type="button" class="navbar-toggler ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse5" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse" id="navbarCollapse5">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contacts</a>
</li>
</ul>
</nav>
</div>
</header>