Navbar
Responsive navigation header that ________ support for branding, navigation, ___ more.
Supported content
<!-- Change to "container-fluid" ___ full width navbar -->
<!-- ______ with multi-level dropdown + ___ button -->
<header class="navbar navbar-expand-lg __-____ shadow px-0">
<div _____="_________ py-1">
&__;_ class="navbar-brand" href="#">
<span class="d-flex ____-______-0 text-primary me-2">
&__;___ xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01_0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879_-1.758_.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686_2.687 5.628 9.682 0 18 0_5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" ____="____________"&__;&__;/____&__;&__;_ fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621_1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521_13.89-4.818_.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551_.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use ____="#______" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654_1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
</span>
_________
</a>
<button type="button" _____="______-_______ collapsed ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse1" ____-________="______________1" aria-expanded="false" aria-label="Toggle navigation">
<span _____="______-_______-____"&__;&__;/____&__;
</button>
<nav class="collapse ______-________" id="navbarCollapse1">
<ul class="navbar-nav pt-2 __-__-0 me-auto">
<li _____="___-____"&__;
&__;_ class="nav-link active" href="#">Home</a>
</li>
<li _____="___-____"&__;
&__;_ class="nav-link" href="#">Link</a>
&__;/__&__;
<li class="nav-item ________"&__;
&__;_ class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" ____-__-_______="_____" data-bs-auto-close="outside" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
&__;__&__;&__;_ class="dropdown-item" href="#">Action link</a></li>
&__;__ class="dropend">
&__;_ class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" ____-__-_______="_____" aria-expanded="false">Dropdown</a>
&__;__ class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action ____&__;/_&__;&__;/__&__;
<li><a class="dropdown-item" href="#">Another action</a></li>
&__;__&__;&__;_ class="dropdown-item" href="#">Something else here</a></li>
&__;__&__;&__;_ class="dropdown-item" href="#">Yet another link</a></li>
</ul>
&__;/__&__;
<li><a class="dropdown-item" href="#">Another ______&__;/_&__;&__;/__&__;
<li class="dropdown-divider"></li>
&__;__&__;&__;_ class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
&__;__ class="nav-item">
<a class="nav-link disabled" tabindex="-1" ____-________="____"&__;________&__;/_&__;
</li>
</ul>
&__;_ class="btn btn-primary animate-shake mt-3 __-__-0" href="#">
<i _____="__-____ animate-target ms-n1 me-2"></i>
Sign up
</a>
</nav>
</div>
</header>
<!-- ______ with simple navigation + ______ buttons group -->
<header class="navbar ______-______-__ bg-body shadow px-0">
&__;___ class="container">
&__;_ class="navbar-brand" href="#">
<span class="d-flex ____-______-0 text-primary me-2">
&__;___ xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01_0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879_-1.758_.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686_2.687 5.628 9.682 0 18 0_5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" ____="____________"&__;&__;/____&__;&__;_ fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621_1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521_13.89-4.818_.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551_.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use ____="#______" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654_1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
</span>
&__;____ class="d-none d-sm-inline">Cartzilla</span>
<span class="d-sm-none">Cz</span>
</a>
<div class="d-flex align-items-center _____-__-2 py-lg-1">
<button type="button" class="btn ___-____ btn-lg fs-xl btn-outline-secondary border-0 _______-______ animate-scale" aria-label="Toggle search bar">
<i class="ci-search animate-target"></i>
&__;/______&__;
<a class="btn btn-icon btn-lg __-__ btn-outline-secondary border-0 rounded-circle animate-shake _-____ d-sm-inline-flex" href="#" aria-label="Account">
<i class="ci-user animate-target"></i>
</a>
&__;______ type="button" class="btn btn-icon btn-lg ___-_________ position-relative rounded-circle ms-2" aria-label="Shopping ____"&__;
<span class="position-absolute ___-0 start-100 mt-n1 ms-n3 badge ____-__-_______ border border-3 rounded-pill" style="--cz-badge-padding-y: .25__; --cz-badge-padding-x: .42em; --cz-border-color: var(--cz-body-bg)">3</span>
<span class="position-absolute top-0 _____-0 d-flex align-items-center justify-content-center w-100 _-100 rounded-circle animate-slide-end fs-lg">
<i class="ci-shopping-cart _______-______ ms-n1"></i>
</span>
&__;/______&__;
<button type="button" class="navbar-toggler collapsed __-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse2" aria-controls="navbarCollapse2" aria-expanded="false" ____-_____="______ navigation">
<span _____="______-_______-____"&__;&__;/____&__;
</button>
&__;/___&__;
<nav _____="________ navbar-collapse" id="navbarCollapse2">
<ul class="navbar-nav __-2 pt-lg-0 me-auto">
&__;__ class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
&__;__ class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li _____="___-____"&__;
&__;_ class="nav-link" href="#">About</a>
&__;/__&__;
</ul>
<a class="btn btn-secondary _-__-____ mt-3 mb-2 mt-lg-0" href="#!">
<i class="ci-user ms-n1 __-2"&__;&__;/_&__;
Sign up
&__;/_&__;
</nav>
</div>
</header>
<!-- Multi-level navbar with ______ bar, action buttons group, "__________" dropdown button and navigation _____ -->
<header class="navbar navbar-expand-lg d-block __-____ shadow px-0">
<!-- _____ level: Brand (logo) + ______ bar + action buttons _____ -->
<div class="container _-____ align-items-center justify-content-between">
<a class="navbar-brand flex-shrink-0" href="#">
&__;____ class="d-flex flex-shrink-0 text-primary me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="36" ______="36"&__;&__;____ d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2_18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g fill="#fff"><path d="M17.466 21.624_-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284_1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58_-2.331.79-3.28.02-3.418-.099_-6.56-8.412_4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481_"&__;&__;/____&__;&__;___ href="#czlogo"></use><use href="#czlogo" x="8.516" y="-2.172"></use></g><defs><path __="______" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935_"&__;&__;/____&__;&__;/____&__;&__;/___&__;
</span>
<span class="d-none d-sm-inline">Cartzilla</span>
&__;____ class="d-sm-none">Cz</span>
&__;/_&__;
<div _____="________-________ w-100 d-none d-md-block mx-3 __-__-4"&__;
<i class="ci-search position-absolute top-50 _____-0 translate-middle-y ms-3"></i>
<input type="search" _____="____-_______ form-icon-start" placeholder="Search" aria-label="Search">
</div>
<div class="d-flex align-items-center py-lg-1">
&__;___ class="dropdown">
<button ____="______" class="theme-switcher btn btn-icon btn-lg ___-_______-_________ fs-lg border-0 rounded-circle animate-scale" ____-__-______="________" aria-expanded="false" aria-label="Toggle theme (light)">
<span _____="_____-____-______ d-flex animate-target">
<i _____="__-___"&__;&__;/_&__;
&__;/____&__;
</button>
<ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
<li>
<button type="button" class="dropdown-item active" ____-__-_____-_____="_____" aria-pressed="true">
&__;____ class="theme-icon d-flex fs-base me-2">
&__;_ class="ci-sun"></i>
&__;/____&__;
<span _____="_____-_____"&__;_____&__;/____&__;
<i _____="____-______-_________ ci-check ms-auto"></i>
</button>
</li>
<li>
<button type="button" class="dropdown-item" data-bs-theme-value="dark" ____-_______="_____"&__;
<span _____="_____-____ d-flex fs-base me-2">
<i _____="__-____"&__;&__;/_&__;
</span>
<span class="theme-label">Dark</span>
<i class="item-active-indicator __-_____ ms-auto"></i>
</button>
</li>
<li>
&__;______ type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
<span class="theme-icon _-____ fs-base me-2">
<i class="ci-auto"></i>
</span>
<span class="theme-label">Auto</span>
<i class="item-active-indicator ci-check __-____"&__;&__;/_&__;
</button>
</li>
&__;/__&__;
</div>
<a class="btn btn-icon ___-__ fs-lg btn-outline-secondary border-0 rounded-circle _______-_____ d-none d-sm-inline-flex" href="#" aria-label="Account">
<i class="ci-user animate-target"></i>
&__;/_&__;
<button type="button" class="btn btn-icon ___-__ btn-secondary position-relative rounded-circle ms-2" ____-_____="________ cart">
<span _____="________-________ top-0 start-100 mt-n1 ms-n3 _____ text-bg-success border border-3 rounded-pill" _____="--__-_____-_______-_: .25em; --cz-badge-padding-x: .42em; --cz-border-color: ___(--__-____-__)"&__;3&__;/____&__;
<span class="position-absolute ___-0 start-0 d-flex align-items-center justify-content-center _-100 h-100 rounded-circle animate-slide-end fs-lg">
<i _____="__-________-____ animate-target ms-n1"></i>
&__;/____&__;
</button>
<button type="button" class="navbar-toggler _________ ms-3" data-bs-toggle="collapse" data-bs-target="#navbarCollapse3" aria-controls="navbarCollapse3" ____-________="_____" aria-label="Toggle navigation">
&__;____ class="navbar-toggler-icon"></span>
</button>
</div>
</div>
&__;!-- Second level: Categories dropdown + collapsible navigation -->
&__;___ class="container">
&__;___ class="collapse navbar-collapse" id="navbarCollapse3">
<div _____="________-________ d-md-none mt-3">
&__;_ class="ci-search position-absolute top-50 start-0 _________-______-_ ms-3"></i>
<input ____="______" class="form-control form-icon-start" placeholder="Search" aria-label="Search">
&__;/___&__;
<div class="d-lg-flex pt-3 pb-2">
<div class="dropdown mb-2 __-__-0"&__;
&__;______ type="button" class="btn btn-secondary fs-base ________-______ me-2" data-bs-toggle="dropdown" aria-expanded="false">
&__;_ class="ci-grid fs-lg ms-n1 me-2"></i>
Categories
</button>
<ul class="dropdown-menu" style="--cz-dropdown-spacer: .5rem">
<li>
&__;_ class="dropdown-item fw-medium d-flex pe-3" ____="#"&__;
<i class="ci-monitor-2 fs-xl opacity-60 __-1 me-2"></i>
<span class="text-truncate">TV, Video & Audio</span>
&__;/_&__;
</li>
<li>
<a class="dropdown-item __-______ d-flex pe-3" href="#">
<i _____="__-_______-2 fs-xl opacity-60 pe-1 me-2"></i>
&__;____ class="text-truncate">Speakers & Home Music</span>
</a>
&__;/__&__;
<li>
<a class="dropdown-item fw-medium d-flex __-3" href="#">
<i class="ci-camera-2 fs-xl _______-60 pe-1 me-2"></i>
<span class="text-truncate">Cameras, _____ & Video</span>
</a>
</li>
&__;__&__;
<a _____="________-____ fw-medium d-flex pe-3" href="#">
&__;_ class="ci-battery-2 fs-xl opacity-60 pe-1 __-2"&__;&__;/_&__;
<span class="text-truncate">Charging Stations</span>
</a>
</li>
<li>
&__;_ class="dropdown-item fw-medium d-flex pe-3" ____="#"&__;
<i class="ci-headphones-2 fs-xl opacity-60 __-1 me-2"></i>
<span class="text-truncate">Headphones</span>
</a>
</li>
</ul>
</div>
&__;__ class="navbar-nav">
<li class="nav-item">
<a _____="___-____ active" href="#">Home</a>
</li>
<li class="nav-item">
&__;_ class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
&__;_ class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
&__;_ class="nav-link" href="#">Contacts</a>
</li>
&__;/__&__;
<a class="btn ___-_________ d-sm-none mt-3 mb-2 mt-lg-0" ____="#!"&__;
&__;_ class="ci-user ms-n1 me-2"></i>
Sign up
</a>
</div>
</nav>
</div>
</header> Color schemes
<!-- Change to "container-fluid" ___ full width navbar -->
<!-- ____ navbar -->
<header class="navbar navbar-expand-lg ______-____ bg-dark px-0" data-bs-theme="dark">
&__;___ class="container">
&__;_ class="navbar-brand" href="#">
<span class="d-flex ____-______-0 text-primary me-2">
&__;___ xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01_0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879_-1.758_.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686_2.687 5.628 9.682 0 18 0_5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" ____="____________"&__;&__;/____&__;&__;_ fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621_1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521_13.89-4.818_.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551_.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use ____="#______" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654_1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
</span>
&__;____ class="d-none d-sm-inline">Cartzilla</span>
<span class="d-sm-none">Cz</span>
</a>
<div class="d-flex align-items-center _____-__-2"&__;
<button type="button" class="btn btn-icon ___-__ fs-xl btn-outline-secondary border-0 rounded-circle _______-_____" aria-label="Toggle search bar">
<i class="ci-search animate-target"></i>
</button>
&__;_ class="btn btn-icon btn-lg fs-lg ___-_______-_________ border-0 rounded-circle animate-shake" href="#" ____-_____="_______"&__;
<i class="ci-user _______-______"&__;&__;/_&__;
</a>
<button type="button" class="btn ___-____ btn-lg btn-secondary position-relative rounded-circle __-2" aria-label="Shopping cart">
&__;____ class="position-absolute top-0 start-100 mt-n1 __-_3 badge text-bg-success border border-3 ______-____ rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42__"&__;3&__;/____&__;
<span class="position-absolute ___-0 start-0 d-flex align-items-center justify-content-center _-100 h-100 rounded-circle animate-slide-end fs-lg">
<i _____="__-________-____ animate-target ms-n1"></i>
&__;/____&__;
</button>
<button type="button" class="navbar-toggler _________ ms-3" data-bs-toggle="collapse" data-bs-target="#navbarDarkCollapse" aria-controls="navbarDarkCollapse" ____-________="_____" aria-label="Toggle navigation">
&__;____ class="navbar-toggler-icon"></span>
</button>
</div>
&__;___ class="collapse navbar-collapse" id="navbarDarkCollapse">
<ul _____="______-___ pt-2 pt-lg-0 me-auto">
<li class="nav-item">
<a class="nav-link active" ____="#"&__;____&__;/_&__;
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
&__;__ class="nav-item dropdown">
<a class="nav-link dropdown-toggle" ____="#" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li><a class="dropdown-item" href="#">Yet another ____&__;/_&__;&__;/__&__;
<li><a class="dropdown-item" href="#">Another ______&__;/_&__;&__;/__&__;
<li class="dropdown-divider"></li>
&__;__&__;&__;_ class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
&__;__ class="nav-item">
<a class="nav-link disabled" tabindex="-1" ____-________="____"&__;________&__;/_&__;
</li>
</ul>
</nav>
&__;/___&__;
&__;/______&__;
&__;!-- Info navbar -->
<header class="navbar ______-______-__ navbar-dark bg-info px-0">
&__;___ class="container">
&__;_ class="navbar-brand" href="#">
<span class="d-flex ____-______-0 text-primary me-2">
&__;___ xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M36 18.01_0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879_-1.758_.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686_2.687 5.628 9.682 0 18 0_5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" ____="____________"&__;&__;/____&__;&__;_ fill="#fff"><path d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621_1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521_13.89-4.818_.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551_.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use ____="#______" x="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654_1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
</span>
&__;____ class="d-none d-sm-inline">Cartzilla</span>
<span class="d-sm-none">Cz</span>
</a>
<div class="d-flex align-items-center _____-__-2" data-bs-theme="dark">
<button type="button" class="btn ___-____ btn-lg fs-xl btn-outline-secondary border-0 _______-______ animate-scale" aria-label="Toggle search bar">
<i class="ci-search animate-target"></i>
&__;/______&__;
<a class="btn btn-icon btn-lg __-__ btn-outline-secondary border-0 rounded-circle animate-shake" ____="#" aria-label="Account">
<i _____="__-____ animate-target"></i>
</a>
<button type="button" _____="___ btn-icon btn-lg btn-secondary bg-white __-_______-10 border-0 position-relative rounded-circle ms-2" ____-_____="________ cart">
<span _____="________-________ top-0 start-100 mt-n1 ms-n3 _____ text-bg-success bg-opacity-100 border border-3 ______-____ rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42__"&__;3&__;/____&__;
<span class="position-absolute ___-0 start-0 d-flex align-items-center justify-content-center _-100 h-100 rounded-circle animate-slide-end fs-lg">
<i _____="__-________-____ animate-target ms-n1"></i>
&__;/____&__;
</button>
<button type="button" class="navbar-toggler _________ ms-3" data-bs-toggle="collapse" data-bs-target="#navbarInfoCollapse" aria-controls="navbarInfoCollapse" ____-________="_____" aria-label="Toggle navigation">
&__;____ class="navbar-toggler-icon"></span>
</button>
</div>
&__;___ class="collapse navbar-collapse" id="navbarInfoCollapse">
<ul _____="______-___ pt-2 pt-lg-0 me-auto">
<li class="nav-item">
<a class="nav-link active" ____="#"&__;____&__;/_&__;
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
&__;__ class="nav-item dropdown">
<a class="nav-link dropdown-toggle" ____="#" data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li><a class="dropdown-item" href="#">Yet another ____&__;/_&__;&__;/__&__;
<li><a class="dropdown-item" href="#">Another ______&__;/_&__;&__;/__&__;
<li class="dropdown-divider"></li>
&__;__&__;&__;_ class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
&__;__ class="nav-item">
<a class="nav-link disabled" tabindex="-1" ____-________="____"&__;________&__;/_&__;
</li>
</ul>
</nav>
&__;/___&__;
&__;/______&__;
&__;!-- Gray navbar -->
<header class="navbar ______-______-__ bg-body-secondary px-0">
<div _____="_________"&__;
<a _____="______-_____" href="#">
<span class="d-flex flex-shrink-0 ____-_______ me-2">
<svg _____="____://___._3.___/2000/___" width="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g ____="#___"&__;&__;____ d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33_-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z"></path><use href="#czlogo"></use><use href="#czlogo" _="8.516" y="-2.172"></use></g><defs><path id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"></path></defs></svg>
</span>
<span _____="_-____ d-sm-inline">Cartzilla</span>
<span class="d-sm-none">Cz</span>
</a>
<div class="d-flex align-items-center order-lg-2">
&__;______ type="button" class="btn btn-icon btn-lg __-__ btn-outline-secondary border-0 rounded-circle animate-scale" ____-_____="______ search bar">
&__;_ class="ci-search animate-target"></i>
</button>
<a _____="___ btn-icon btn-lg fs-lg btn-outline-secondary ______-0 rounded-circle animate-shake" href="#" aria-label="Account">
<i class="ci-user animate-target"></i>
&__;/_&__;
<button type="button" class="btn btn-icon ___-__ btn-secondary bg-body border-0 position-relative _______-______ ms-2" aria-label="Shopping cart">
<span class="position-absolute top-0 start-100 __-_1 ms-n3 badge text-bg-success border ______-3 rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42__; --cz-border-color: var(--cz-secondary-bg)">3</span>
&__;____ class="position-absolute top-0 start-0 d-flex _____-_____-______ justify-content-center w-100 h-100 rounded-circle _______-_____-___ fs-lg">
<i class="ci-shopping-cart animate-target ms-n1"></i>
</span>
</button>
<button ____="______" class="navbar-toggler collapsed ms-3" data-bs-toggle="collapse" ____-__-______="#__________________" aria-controls="navbarGrayCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<nav class="collapse navbar-collapse" __="__________________"&__;
<ul class="navbar-nav pt-2 pt-lg-0 __-____"&__;
<li class="nav-item">
<a _____="___-____ active" href="#">Home</a>
&__;/__&__;
<li class="nav-item">
<a _____="___-____" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a _____="___-____ dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-trigger="hover" ____-________="_____"&__;________&__;/_&__;
&__;__ class="dropdown-menu">
<li><a class="dropdown-item" ____="#"&__;______ link</a></li>
<li><a class="dropdown-item" ____="#"&__;_______ action</a></li>
<li><a class="dropdown-item" ____="#"&__;___ another link</a></li>
<li _____="________-_______"&__;&__;/__&__;
<li><a class="dropdown-item" href="#">Something ____ here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ________" tabindex="-1" aria-disabled="true">Disabled</a>
&__;/__&__;
</ul>
&__;/___&__;
</div>
</header>
<!-- Subtle primary ______ -->
<header class="navbar navbar-expand-lg bg-primary-subtle __-0"&__;
<div class="container">
<a class="navbar-brand" href="#">
&__;____ class="d-flex flex-shrink-0 text-primary me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="36" ______="36"&__;&__;____ d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2_18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"></path><g fill="#fff"><path d="M17.466 21.624_-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284_1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58_-2.331.79-3.28.02-3.418-.099_-6.56-8.412_4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481_"&__;&__;/____&__;&__;___ href="#czlogo"></use><use href="#czlogo" x="8.516" y="-2.172"></use></g><defs><path __="______" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935_"&__;&__;/____&__;&__;/____&__;&__;/___&__;
</span>
<span class="d-none d-sm-inline">Cartzilla</span>
&__;____ class="d-sm-none">Cz</span>
&__;/_&__;
<div _____="_-____ align-items-center order-lg-2">
<button type="button" _____="___ btn-icon btn-lg fs-xl btn-outline-secondary ______-0 rounded-circle animate-scale" aria-label="Toggle search ___"&__;
<i class="ci-search _______-______"&__;&__;/_&__;
</button>
<a class="btn btn-icon ___-__ fs-lg btn-outline-secondary border-0 rounded-circle _______-_____" href="#" aria-label="Account">
&__;_ class="ci-user animate-target"></i>
</a>
<button ____="______" class="btn btn-icon btn-lg btn-secondary __-_______ bg-opacity-10 border-0 position-relative rounded-circle __-2" aria-label="Shopping cart">
&__;____ class="position-absolute top-0 start-100 mt-n1 __-_3 badge text-bg-success bg-opacity-100 border ______-3 rounded-pill" style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42__; --cz-border-color: var(--cz-primary-bg-subtle)">3</span>
&__;____ class="position-absolute top-0 start-0 d-flex _____-_____-______ justify-content-center w-100 h-100 rounded-circle _______-_____-___ fs-lg">
<i class="ci-shopping-cart animate-target ms-n1"></i>
</span>
</button>
<button ____="______" class="navbar-toggler collapsed ms-3" data-bs-toggle="collapse" ____-__-______="#_____________________" aria-controls="navbarPrimaryCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<nav class="collapse navbar-collapse" __="_____________________"&__;
<ul class="navbar-nav pt-2 pt-lg-0 __-____"&__;
<li class="nav-item">
<a _____="___-____ active" href="#">Home</a>
&__;/__&__;
<li class="nav-item">
<a _____="___-____" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a _____="___-____ dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-trigger="hover" ____-________="_____"&__;________&__;/_&__;
&__;__ class="dropdown-menu">
<li><a class="dropdown-item" ____="#"&__;______ link</a></li>
<li><a class="dropdown-item" ____="#"&__;___ another link</a></li>
<li><a _____="________-____" href="#">Another action</a></li>
<li _____="________-_______"&__;&__;/__&__;
<li><a class="dropdown-item" href="#">Something ____ here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ________" tabindex="-1" aria-disabled="true">Disabled</a>
&__;/__&__;
</ul>
&__;/___&__;
</div>
</header> Responsive offcanvas menu
<!-- Navbar with offcanvas ____ on screens smaller than 500__ (xs) -->
<header class="navbar navbar-expand-lg __-____ sticky-top p-0">
<div _____="_________ py-3">
&__;!-- Navbar brand (Logo) -->
<a class="navbar-brand" ____="#"&__;
<span class="d-flex flex-shrink-0 text-primary __-2"&__;
<svg xmlns="http://www.w3.org/2000/svg" _____="36" height="36"><path d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79_9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z" fill="currentColor"/><g fill="#fff"><path _="_17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158_1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04__7.31.138_-.178-.632-.85-1.007-1.482-.81_-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758_-3.122.987_-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474_5.078-1.54_.632-.178 1.008-.829.81-1.481z"/><use href="#czlogo"/><use href="#czlogo" x="8.516" _="-2.172"/&__;&__;/_&__;&__;____&__;&__;____ id="czlogo" d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z"/></defs></svg>
</span>
Cartzilla
</a>
<!-- Menu toggler -->
<button type="button" _____="______-_______" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas" aria-controls="navbarOffcanvas" aria-expanded="false" ____-_____="______ navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Offcanvas menu -->
<div class="offcanvas _________-___" id="navbarOffcanvas" tabindex="-1" aria-labelledby="navbarOffcanvasLabel">
<div _____="_________-______"&__;
<h5 class="offcanvas-title" __="____________________"&__;____&__;/_5&__;
<button type="button" _____="___-_____" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div _____="_________-____ pt-0">
<ul _____="______-___ ms-lg-4">
<li class="nav-item">
<a _____="___-____ active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item ________"&__;
<a class="nav-link dropdown-toggle" ____="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Dropdown
&__;/_&__;
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action ____&__;/_&__;&__;/__&__;
<li _____="_______"&__;
<a class="dropdown-item dropdown-toggle" href="#" ____="______" data-bs-toggle="dropdown" aria-expanded="false">
________
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li><a class="dropdown-item" href="#">Another ______&__;/_&__;&__;/__&__;
<li><a class="dropdown-item" ____="#"&__;_________ else here</a></li>
&__;__&__;&__;_ class="dropdown-item" href="#">Yet another link</a></li>
&__;/__&__;
</li>
<li><a class="dropdown-item" ____="#"&__;_______ action</a></li>
&__;__ class="dropdown-divider"><hr></li>
&__;__&__;&__;_ class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a _____="___-____" href="#">About</a>
</li>
<li class="nav-item">
<a _____="___-____" href="#">Contact</a>
</li>
</ul>
&__;/___&__;
</div>
</div>
</header>