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">
<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">
<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">
<i class="ai-search"></i>
</a>
<a href="#" class="nav-link fs-4 p-2 mx-sm-1">
<i class="ai-user"></i>
</a>
<a href="#" class="nav-link position-relative fs-4 p-2">
<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">
<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">
<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-muted 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-muted 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">
<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>// Change to .container-fluid for full width navbar
// Menu with dropdown + Button
header.navbar.navbar-expand-lg.bg-light
.container
a(href="#").navbar-brand
span.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")
| Around
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse1").navbar-toggler
span.navbar-toggler-icon
nav#navbarCollapse1.collapse.navbar-collapse
ul.navbar-nav.me-auto
li.nav-item.active
a(href="#").nav-link
| Home
li.nav-item
a(href="#").nav-link
| Link
li.nav-item.dropdown
a(href="#", data-bs-toggle="dropdown", data-bs-auto-close="outside", aria-expanded="false").nav-link.dropdown-toggle
| Dropdown
ul.dropdown-menu
li: a(href="#").dropdown-item
| Action link
li.dropdown
a(href="#", data-bs-toggle="dropdown", aria-expanded="false").dropdown-item.dropdown-toggle
| Dropdown
ul.dropdown-menu
li: a(href="#").dropdown-item
| Action link
li: a(href="#").dropdown-item
| Another action
li: a(href="#").dropdown-item
| Something else here
li: a(href="#").dropdown-item
| Yet another link
li: a(href="#").dropdown-item
| Another action
li.dropdown-divider
li: a(href="#").dropdown-item
| Something else here
li.nav-item
a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled
| Disabled
a(href="#").btn.btn-primary.btn-sm.fs-sm.ms-3.mb-4.mb-lg-0
i.ai-user.me-2.ms-n1
| Sign up
// Menu + Theme mode switch + Button
header.navbar.navbar-expand-lg.bg-light
.container
a(href="#").navbar-brand
span.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")
| Around
div(data-bs-toggle='mode').form-check.form-switch.mode-switch.order-lg-2.me-3.me-lg-4.ms-auto
input(type="checkbox")#theme-mode.form-check-input
label(for="theme-mode").form-check-label
i.ai-sun.fs-lg
label(for="theme-mode").form-check-label
i.ai-moon.fs-lg
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse2").navbar-toggler
span.navbar-toggler-icon
a(href="#").btn.btn-outline-primary.btn-sm.fs-sm.order-lg-3.d-none.d-lg-inline-flex
i.ai-login.me-2.ms-n1
| Sign in
nav#navbarCollapse2.collapse.navbar-collapse
ul.navbar-nav
li.nav-item.active
a(href="#").nav-link
| Home
li.nav-item
a(href="#").nav-link
| Services
li.nav-item
a(href="#").nav-link
| About
a(href="#").btn.btn-outline-primary.btn-sm.fs-sm.d-lg-none.ms-3.mb-4.mb-lg-0
i.ai-login.me-2.ms-n1
| Sign in
// Menu + Search + Account + Shopping cart
header.navbar.navbar-expand-lg.bg-light
.container
a(href="#").navbar-brand
span.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")
| Around
.nav.align-items-center.order-lg-2.ms-auto
a(href="#").nav-link.fs-4.p-2.mx-sm-1
i.ai-search
a(href="#").nav-link.fs-4.p-2.mx-sm-1
i.ai-user
a(href="#").nav-link.position-relative.fs-4.p-2
i.ai-cart
span.badge.bg-primary.fs-xs.position-absolute.end-0.top-0.me-n1(style="padding: .25rem .375rem;")
| 3
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse3").navbar-toggler.ms-3
span.navbar-toggler-icon
nav#navbarCollapse3.collapse.navbar-collapse
ul.navbar-nav
li.nav-item.active
a(href="#").nav-link
| Home
li.nav-item
a(href="#").nav-link
| Services
li.nav-item
a(href="#").nav-link
| About
li.nav-item
a(href="#").nav-link
| Contacts
// Menu + Contact (Phone / Email) links
header.navbar.navbar-expand-lg.bg-light
.container
a(href="#").navbar-brand
span.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")
| Around
.d-flex.align-items-center.order-lg-2.ms-auto
a(href="tel:4055550128").d-flex.align-items-center.text-decoration-none
i.ai-phone.fs-3
.text-nowrap.ps-2.d-none.d-lg-block
h6.fs-sm.lh-1.mb-0 Call us
span.text-body.fs-xs (405) 555-0128
a(href="mailto:hello@example.com").d-flex.align-items-center.text-decoration-none.ms-4
i.ai-messages.fs-3
.text-nowrap.ps-2.d-none.d-lg-block
h6.fs-sm.lh-1.mb-0 Chat with us
span.text-body.fs-xs hello@example.com
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse4").navbar-toggler.ms-3
span.navbar-toggler-icon
nav#navbarCollapse4.collapse.navbar-collapse
ul.navbar-nav
li.nav-item.active
a(href="#").nav-link
| Home
li.nav-item
a(href="#").nav-link
| Services
li.nav-item
a(href="#").nav-link
| About
// User logged in state. User account dropdown
header.navbar.navbar-expand-lg.bg-light
.container
a(href="#").navbar-brand
span.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")
| Around
.dropdown.nav.d-block.order-lg-2.ms-auto
a(href="#", data-bs-toggle="dropdown", aria-expanded="false").nav-link.d-flex.align-items-center.p-0
img(src="assets/img/avatar/01.jpg", width="48", alt="Isabella Bocouse").border.rounded-circle
.d-none.d-sm-block.ps-2
.fs-xs.lh-1.opacity-60 Hello,
.fs-sm.dropdown-toggle Isabella
.dropdown-menu.dropdown-menu-end.my-1
h6.dropdown-header.fs-xs.fw-medium.text-muted.text-uppercase.pb-1
| Account
a(href="#").dropdown-item
i.ai-user-check.fs-lg.opacity-70.me-2
| Overview
a(href="#").dropdown-item
i.ai-settings.fs-lg.opacity-70.me-2
| Settings
a(href="#").dropdown-item
i.ai-wallet.fs-base.opacity-70.me-2.mt-n1
| Billing
.dropdown-divider
h6.dropdown-header.fs-xs.fw-medium.text-muted.text-uppercase.pb-1
| Dashboard
a(href="#").dropdown-item
i.ai-cart.fs-lg.opacity-70.me-2
| Orders
a(href="#").dropdown-item
i.ai-activity.fs-lg.opacity-70.me-2
| Earnings
a(href="#").dropdown-item.d-flex.align-items-center
i.ai-messages.fs-lg.opacity-70.me-2
| Chat
span.badge.bg-danger.ms-auto 4
a(href="#").dropdown-item
i.ai-heart.fs-lg.opacity-70.me-2
| Favorites
.dropdown-divider
a(href="#").dropdown-item
i.ai-logout.fs-lg.opacity-70.me-2
| Sign out
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse5").navbar-toggler.ms-3
span.navbar-toggler-icon
nav#navbarCollapse5.collapse.navbar-collapse
ul.navbar-nav
li.nav-item.active
a(href="#").nav-link
| Home
li.nav-item
a(href="#").nav-link
| Services
li.nav-item
a(href="#").nav-link
| About
li.nav-item
a(href="#").nav-link
| Contacts