Add to Cart Navbar
响应式导航栏，集品牌展示、导航链接和更多功能于一体。
Bootstrap Docs
Basic example
<!-- Basic navbar -->
<header class="navbar navbar-expand-lg navbar-light shadow-sm">
<div class="container">
<!-- Brand -->
<a class="navbar-brand d-none d-lg-block order-lg-1" href="#">
<img width="142" src="path-to-logo" alt="DigiCart"/>
</a>
<a class="navbar-brand d-lg-none me-2" href="#">
<img width="74" src="path-to-logo" alt="DigiCart"/>
</a>
<!-- Toolbar -->
<div class="navbar-toolbar d-flex align-items-center order-lg-3">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-tool" href="#">
<div class="navbar-tool-icon-box"><i class="navbar-tool-icon ci-search"></i></div>
</a>
<a class="navbar-tool ms-1 me-n1" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-user"></i>
</div>
</a>
<a class="navbar-tool ms-3" href="#">
<div class="navbar-tool-icon-box bg-secondary">
<span class="navbar-tool-label">4</span>
<i class="navbar-tool-icon ci-cart"></i>
</div>
</a>
</div>
<!-- Collapsible menu -->
<div class="collapse navbar-collapse me-auto order-lg-2" id="navbarCollapse">
<hr class="d-lg-none my-3">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" 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" data-bs-auto-close="outside">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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</header>// Basic navbar
header.navbar.navbar-expand-lg.navbar-light.shadow-sm
.container
// Brand
a(href="#").navbar-brand.d-none.d-lg-block.order-lg-1
img(src="path-to-logo" width="142" alt="DigiCart")
a(href="#").navbar-brand.d-lg-none.me-2
img(src="path-to-logo" width="74" alt="DigiCart")
// Toolbar
.navbar-toolbar.d-flex.align-items-center.order-lg-3
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse").navbar-toggler
span.navbar-toggler-icon
a(href="#").navbar-tool
.navbar-tool-icon-box: i.navbar-tool-icon.ci-search
a(href="#").navbar-tool.ms-1.me-n1
.navbar-tool-icon-box: i.navbar-tool-icon.ci-user
a(href="#").navbar-tool.ms-3
.navbar-tool-icon-box.bg-secondary
span.navbar-tool-label 4
i.navbar-tool-icon.ci-cart
// Collapsible menu
#navbarCollapse.collapse.navbar-collapse.me-auto.order-lg-2
hr.d-lg-none.my-3
ul.navbar-nav
li.nav-item.active
a.nav-link(href="#") Home
li.nav-item
a.nav-link(href="#") Link
li.nav-item.dropdown
a.nav-link.dropdown-toggle(href="#", data-bs-toggle="dropdown" data-bs-auto-close="outside") Dropdown
ul.dropdown-menu
li
a.dropdown-item(href="#") Action link
li.dropdown
a(href="#", data-bs-toggle="dropdown").dropdown-item.dropdown-toggle
| Dropdown
ul.dropdown-menu
li
a.dropdown-item(href="#") Action link
li
a.dropdown-item(href="#") Another action
li
a.dropdown-item(href="#") Something else here
li
a.dropdown-item(href="#") Yet another link
li
a.dropdown-item(href="#") Another action
li.dropdown-divider
li
a.dropdown-item(href="#") Something else here
li.nav-item
a.nav-link.disabled(href="#", tabindex="-1", aria-disabled="true") Disabled
Color schemes
<!-- Dark navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- Navbar content -->
</div>
</header>
<!-- Accent navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-accent">
<div class="container">
<!-- Navbar content -->
</div>
</header>
<!-- Custom color navbar -->
<header class="navbar navbar-expand-lg navbar-light" style="background-color: #f2f5fc;">
<div class="container">
<!-- Navbar content -->
</div>
</header>// Dark navbar
header.navbar.navbar-expand-lg.navbar-dark.bg-dark
.container
//- Navbar content
// Accent navbar
header.navbar.navbar-expand-lg.navbar-accent.bg-dark
.container
//- Navbar content
// Custom color navbar
header.navbar.navbar-expand-lg.bg-light(style="background-color: #f2f5fc;")
.container
//- Navbar content
Topbar
Eng / $
Français
Deutsch
Italiano<!-- Light topbar -->
<div class="topbar topbar-light bg-secondary">
<div class="container">
<div class="topbar-text dropdown d-md-none">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="tel:00331697720">
<i class="ci-support text-muted me-2"></i>
(00) 33 169 7720
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-location text-muted me-2"></i>
Order tracking
</a>
</li>
</ul>
</div>
<div class="topbar-text text-nowrap d-none d-md-inline-block">
<i class="ci-support"></i>
<span class="text-muted me-1">Support</span>
<a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
</div>
<div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
<div class="ms-3 text-nowrap">
<a class="topbar-link me-4 d-none d-md-inline-block" href="#">
<i class="ci-location"></i>
Order tracking
</a>
<div class="topbar-text dropdown disable-autohide">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<img class="me-2" width="20" src="path-to-image" alt="English"/>
Eng / $
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Français"/>
Français
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
Deutsch
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
Italiano
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Dark topbar -->
<div class="topbar topbar-dark bg-dark">
<div class="container">
<!-- Topbar content -->
</div>
</div>// Light topbar
.topbar.topbar-light.bg-secondary
.container
.topbar-text.dropdown.d-md-none
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle Useful links
ul.dropdown-menu
li
a(href="tel:00331697720").dropdown-item
i.ci-support.text-muted.me-2
| (00) 33 169 7720
li
a(href="#").dropdown-item
i.ci-location.text-muted.me-2
| Order tracking
.topbar-text.text-nowrap.d-none.d-md-inline-block
i.ci-support
span.text-muted.me-1 Support
a.topbar-link(href="tel:00331697720") (00) 33 169 7720
.topbar-text.d-none.d-md-inline-block Free shipping for order over $200
.ms-3.text-nowrap
a(href="#").topbar-link.me-4.d-none.d-md-inline-block
i.ci-location
| Order tracking
.topbar-text.dropdown.disable-autohide
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
img(src="path-to-image" width="20" alt="English").me-2
| Eng / $
ul.dropdown-menu.dropdown-menu-end
li.dropdown-item
select.form-select.form-select-sm
option(value="usd") $ USD
option(value="eur") € EUR
option(value="ukp") £ UKP
option(value="jpy") ¥ JPY
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image" width="20" alt="Français").me-2
| Français
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image" width="20" alt="Deutsch").me-2
| Deutsch
li
a(href="#").dropdown-item
img(src="path-to-image" width="20" alt="Italiano").me-2
| Italiano
// Dark topbar
.topbar.topbar-dark.bg-dark
.container
//- Topbar content
Topbar + Navbar
<!-- Topbar + Navbar -->
<header>
<div class="topbar topbar-dark bg-dark">
<div class="container">
<!-- Topbar content -->
</div>
</div>
<div class="navbar navbar-expand-lg navbar-light shadow-sm">
<div class="container">
<!-- Navbar content -->
</div>
</div>
</header>// Topbar + Navbar
header.shadow-sm
.topbar.topbar-dark.bg-dark
.container
//- Topbar content
.navbar.navbar-expand-lg.navbar-light
.container
//- Navbar content
Multilevel light navbar
<!-- Multilevel light navbar -->
<header class="shadow-sm">
<div class="topbar topbar-dark bg-dark">
<div class="container">
<div class="topbar-text dropdown d-md-none">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="tel:00331697720">
<i class="ci-support text-muted me-2"></i>
(00) 33 169 7720
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-location text-muted me-2"></i>
Order tracking
</a>
</li>
</ul>
</div>
<div class="topbar-text text-nowrap d-none d-md-inline-block">
<i class="ci-support"></i>
<span class="text-muted me-1">Support</span>
<a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
</div>
<div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
<div class="ms-3 text-nowrap">
<a class="topbar-link me-4 d-none d-md-inline-block" href="#">
<i class="ci-location"></i>
Order tracking
</a>
<div class="topbar-text dropdown disable-autohide">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<img class="me-2" width="20" src="path-to-image" alt="English"/>
Eng / $
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Français"/>
Français
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
Deutsch
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
Italiano
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand d-none d-lg-block me-3 flex-shrink-0" href="#">
<img width="142" src="path-to-logo" alt="DigiCart"/>
</a>
<a class="navbar-brand d-lg-none me-2" href="#">
<img width="74" src="path-to-logo" alt="DigiCart"/>
</a>
<div class="input-group d-none d-lg-flex flex-nowrap mx-4">
<input class="form-control pe-5" type="text" placeholder="Search for products">
<i class="ci-search position-absolute top-50 end-0 translate-middle-y text-muted fs-base me-3"></i>
</div>
<div class="navbar-toolbar d-flex align-items-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-tool d-lg-none" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-search"></i>
</div>
</a>
<a class="navbar-tool ms-1 ms-lg-0 me-n1 me-lg-2" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-user"></i>
</div>
<div class="navbar-tool-text ms-n2"><small>Hello, Sign in</small>My Account</div>
</a>
<a class="navbar-tool ms-3" href="#">
<div class="navbar-tool-icon-box bg-secondary">
<span class="navbar-tool-label">4</span>
<i class="navbar-tool-icon ci-cart"></i>
</div>
<div class="navbar-tool-text"><small>My Cart</small>$265.00</div>
</a>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-light bg-light mt-n2 pt-0 pb-2 px-3 px-lg-0">
<div class="container">
<div class="collapse navbar-collapse" id="navbarCollapse">
<hr class="d-lg-none my-3">
<ul class="navbar-nav navbar-mega-nav pe-lg-2 me-lg-2">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle ps-0" href="#">
<i class="ci-view-grid me-2"></i>
Departments
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pages</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Components</a></li>
</ul>
</div>
</div>
</div>
</header>// Multilevel light navbar
header.shadow-sm
.topbar.topbar-dark.bg-dark
.container
.topbar-text.dropdown.d-md-none
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
| Useful links
ul.dropdown-menu
li
a(href="tel:00331697720").dropdown-item
i.ci-support.text-muted.me-2
| (00) 33 169 7720
li
a(href="#").dropdown-item
i.ci-location.text-muted.me-2
| Order tracking
.topbar-text.text-nowrap.d-none.d-md-inline-block
i.ci-support
span.text-muted.me-1 Support
a(href="tel:00331697720").topbar-link
| (00) 33 169 7720
.topbar-text.d-none.d-md-inline-block Free shipping for order over $200
.ms-3.text-nowrap
a(href="#").topbar-link.me-4.d-none.d-md-inline-block
i.ci-location
| Order tracking
.topbar-text.dropdown.disable-autohide
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
img(src="path-to-image", width="20", alt="English").me-2
| Eng / $
ul.dropdown-menu.dropdown-menu-end
li.dropdown-item
select.form-select.form-select-sm
option(value="usd") $ USD
option(value="eur") € EUR
option(value="ukp") £ UKP
option(value="jpy") ¥ JPY
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image" width="20" alt="Français").me-2
| Français
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image" width="20" alt="Deutsch").me-2
| Deutsch
li
a(href="#").dropdown-item
img(src="path-to-image" width="20" alt="Italiano").me-2
| Italiano
.navbar.navbar-expand-lg.navbar-light.bg-light
.container
a(href="#").navbar-brand.d-none.d-lg-block.me-3.flex-shrink-0
img(src="path-to-logo", width="142", "DigiCart")
a(href="#").navbar-brand.d-lg-none.me-2
img(src="path-to-logo", width="74", "DigiCart")
.input-group.d-none.d-lg-flex.flex-nowrap.mx-4
input(type="text", placeholder="Search for products").form-control.rounded-end.pe-5
i.ci-search.position-absolute.top-50.end-0.translate-middle-y.text-muted.fs-base.me-3
.navbar-toolbar.d-flex.align-items-center
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse").navbar-toggler
span.navbar-toggler-icon
a(href="#").navbar-tool.d-lg-none
.navbar-tool-icon-box: i.navbar-tool-icon.ci-search
a(href="#").navbar-tool.ms-1.ms-lg-0.me-n1.me-lg-2
.navbar-tool-icon-box: i.navbar-tool-icon.ci-user
.navbar-tool-text.ms-n2
small Hello, Sign in
| My Account
a(href="#").navbar-tool.ms-3
.navbar-tool-icon-box.bg-secondary
span.navbar-tool-label 4
i.navbar-tool-icon.ci-cart
.navbar-tool-text
small My Cart
| $265.00
.navbar.navbar-expand-lg.navbar-light.bg-light.mt-n2.pt-0.pb-2.px-3.px-lg-0
.container
#navbarCollapse.collapse.navbar-collapse
hr.d-lg-none.my-3
ul.navbar-nav.navbar-mega-nav.pe-lg-2.me-lg-2
li.nav-item.dropdown
a(href="#").nav-link.dropdown-toggle.ps-0
i.ci-view-grid.me-2
| Departments
ul.navbar-nav
li.nav-item
a.nav-link(href="#") Home
li.nav-item
a.nav-link(href="#") Shop
li.nav-item
a.nav-link(href="#") Pages
li.nav-item
a.nav-link(href="#") Blog
li.nav-item
a.nav-link(href="#") Components
Multilevel dark navbar
<!-- Multilevel dark navbar -->
<header>
<div class="topbar topbar-dark bg-darker">
<div class="container">
<div class="topbar-text dropdown d-md-none">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="tel:00331697720">
<i class="ci-support text-muted me-2"></i>
(00) 33 169 7720
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-location text-muted me-2"></i>
Order tracking
</a>
</li>
</ul>
</div>
<div class="topbar-text text-nowrap d-none d-md-inline-block">
<i class="ci-support"></i>
<span class="text-muted me-1">Support</span>
<a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
</div>
<div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
<div class="ms-3 text-nowrap">
<a class="topbar-link me-4 d-none d-md-inline-block" href="#">
<i class="ci-location"></i>
Order tracking
</a>
<div class="topbar-text dropdown disable-autohide">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<img class="me-2" width="20" src="path-to-image" alt="English"/>
Eng / $
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end border border-light">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Français"/>
Français
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
Deutsch
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
Italiano
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand d-none d-lg-block me-3 flex-shrink-0" href="#">
<img width="142" src="path-to-logo" alt="DigiCart"/>
</a>
<a class="navbar-brand d-lg-none me-2" href="#">
<img width="74" src="path-to-logo" alt="DigiCart"/>
</a>
<div class="input-group d-none d-lg-flex flex-nowrap mx-4">
<input class="form-control rounded-end pe-5" type="text" placeholder="Search for products">
<i class="ci-search position-absolute top-50 end-0 translate-middle-y text-muted fs-base me-3"></i>
</div>
<div class="navbar-toolbar d-flex align-items-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-tool d-lg-none" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-search"></i>
</div>
</a>
<a class="navbar-tool ms-1 ms-lg-0 me-n1 me-lg-2" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-user"></i>
</div>
<div class="navbar-tool-text ms-n2"><small>Hello, Sign in</small>My Account</div>
</a>
<a class="navbar-tool ms-3" href="#">
<div class="navbar-tool-icon-box bg-secondary">
<span class="navbar-tool-label">4</span>
<i class="navbar-tool-icon ci-cart"></i>
</div>
<div class="navbar-tool-text"><small>My Cart</small>$265.00</div>
</a>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-dark bg-dark mt-n2 pt-0 pb-2 px-3 px-lg-0">
<div class="container">
<div class="collapse navbar-collapse" id="navbarCollapse">
<hr class="hr-light d-lg-none my-3">
<ul class="navbar-nav navbar-mega-nav pe-lg-2 me-lg-2">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle ps-0" href="#">
<i class="ci-view-grid me-2"></i>
Departments
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pages</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Components</a></li>
</ul>
</div>
</div>
</div>
</header>// Multilevel dark navbar
header
.topbar.topbar-dark.bg-darker
.container
.topbar-text.dropdown.d-md-none
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
| Useful links
ul.dropdown-menu
li
a(href="tel:00331697720").dropdown-item
i.ci-support.text-muted.me-2
| (00) 33 169 7720
li
a(href="#").dropdown-item
i.ci-location.text-muted.me-2
| Order tracking
.topbar-text.text-nowrap.d-none.d-md-inline-block
i.ci-support
span.text-muted.me-1 Support
a(href="tel:00331697720").topbar-link
| (00) 33 169 7720
.topbar-text.d-none.d-md-inline-block Free shipping for order over $200
.ms-3.text-nowrap
a(href="#").topbar-link.me-4.d-none.d-md-inline-block
i.ci-location
| Order tracking
.topbar-text.dropdown.disable-autohide
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
img(src="path-to-image", width="20", alt="English").me-2
| Eng / $
ul.dropdown-menu.dropdown-menu-dark.dropdown-menu-end.border.border-light
li.dropdown-item
select.form-select.form-select-sm
option(value="usd") $ USD
option(value="eur") € EUR
option(value="ukp") £ UKP
option(value="jpy") ¥ JPY
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image", width="20", alt="Français").me-2
| Français
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image", width="20", alt="Deutsch").me-2
| Deutsch
li
a(href="#").dropdown-item
img(src="path-to-image", width="20", alt="Italiano").me-2
| Italiano
.navbar.navbar-expand-lg.navbar-dark.bg-dark
.container
a(href="#").navbar-brand.d-none.d-lg-block.me-3.flex-shrink-0
img(src="path-to-logo", width="142", alt="DigiCart")
a(href="#").navbar-brand.d-lg-none.me-2
img(src="path-to-logo", width="74", alt="DigiCart")
.input-group.d-none.d-lg-flex.flex-nowrap.mx-4
input(type="text", placeholder="Search for products").form-control.rounded-end.pe-5
i.ci-search.position-absolute.top-50.end-0.translate-middle-y.text-muted.fs-base.me-3
.navbar-toolbar.d-flex.align-items-center
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse").navbar-toggler
span.navbar-toggler-icon
a(href="#").navbar-tool.d-lg-none
.navbar-tool-icon-box: i.navbar-tool-icon.ci-search
a(href="#").navbar-tool.ms-1.ms-lg-0.me-n1.me-lg-2
.navbar-tool-icon-box: i.navbar-tool-icon.ci-user
.navbar-tool-text.ms-n2
small Hello, Sign in
| My Account
a(href="#").navbar-tool.ms-3
.navbar-tool-icon-box.bg-secondary
span.navbar-tool-label 4
i.navbar-tool-icon.ci-cart
.navbar-tool-text
small My Cart
| $265.00
.navbar.navbar-expand-lg.navbar-dark.bg-dark.mt-n2.pt-0.pb-2.px-3.px-lg-0
.container
#navbarCollapse.collapse.navbar-collapse
hr.hr-light.d-lg-none.my-3
ul.navbar-nav.navbar-mega-nav.pe-lg-2.me-lg-2
li.nav-item.dropdown
a(href="#").nav-link.dropdown-toggle.ps-0
i.ci-view-grid.me-2
| Departments
ul.navbar-nav
li.nav-item
a.nav-link(href="#") Home
li.nav-item
a.nav-link(href="#") Shop
li.nav-item
a.nav-link(href="#") Pages
li.nav-item
a.nav-link(href="#") Blog
li.nav-item
a.nav-link(href="#") Components
Offcanvas menu
<!-- Offcanvas menu example -->
<!-- Use .navbar-expand-* classes to create a dynamic and flexible navigation sidebar -->
<header class="navbar navbar-light shadow-sm">
<div class="container">
<!-- Brand -->
<a class="navbar-brand d-none d-lg-block order-lg-1" href="#">
<img width="142" src="path-to-logo" alt="DigiCart"/>
</a>
<a class="navbar-brand d-lg-none me-2" href="#">
<img width="74" src="path-to-logo" alt="DigiCart"/>
</a>
<!-- Toolbar -->
<div class="navbar-toolbar d-flex align-items-center order-lg-3">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Offcanvas menu -->
<div class="offcanvas offcanvas-end me-auto order-lg-2" id="navbarOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Menu</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" 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" data-bs-auto-close="outside">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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</header>// Offcanvas menu example
// Use .navbar-expand-* classes to create a dynamic and flexible navigation sidebar
header.navbar.navbar-light.shadow-sm
.container
// Brand
a(href="#").navbar-brand.d-none.d-lg-block.order-lg-1
img(src="path-to-logo" width="142" alt="DigiCart")
a(href="#").navbar-brand.d-lg-none.me-2
img(src="path-to-logo" width="74" alt="DigiCart")
// Toolbar
.navbar-toolbar.d-flex.align-items-center.order-lg-3
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#navbarOffcanvas").navbar-toggler
span.navbar-toggler-icon
// Offcanvas menu
#navbarOffcanvas.collapse.navbar-collapse.me-auto.order-lg-2
.offcanvas-header
h5.offcanvas-title Menu
button(type="button", data-bs-dismiss="offcanvas", aria-label="Close").btn-close.text-reset
.offcanvas-body
ul.navbar-nav
li.nav-item.active
a.nav-link(href="#") Home
li.nav-item
a.nav-link(href="#") Link
li.nav-item.dropdown
a.nav-link.dropdown-toggle(href="#", data-bs-toggle="dropdown" data-bs-auto-close="outside") Dropdown
ul.dropdown-menu
li
a.dropdown-item(href="#") Action link
li.dropdown
a(href="#", data-bs-toggle="dropdown").dropdown-item.dropdown-toggle
| Dropdown
ul.dropdown-menu
li
a.dropdown-item(href="#") Action link
li
a.dropdown-item(href="#") Another action
li
a.dropdown-item(href="#") Something else here
li
a.dropdown-item(href="#") Yet another link
li
a.dropdown-item(href="#") Another action
li.dropdown-divider
li
a.dropdown-item(href="#") Something else here
li.nav-item
a.nav-link.disabled(href="#", tabindex="-1", aria-disabled="true") Disabled