<nav class="navbar navbar-expand-lg navbar-light w-100">
<div class="container px-3">
<a class="navbar-brand" href="../../index.html"><img src="../../assets/images/logo/logo.svg" alt /></a>
<button class="navbar-toggler offcanvas-nav-btn" type="button">
<i class="bi bi-list"></i>
</button>
<div class="offcanvas offcanvas-start offcanvas-nav" style="width: 20rem">
<div class="offcanvas-header">
<a href="../../index.html" class="text-inverse"><img src="../../assets/images/logo/logo.svg" alt /></a>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body pt-0 align-items-center">
<ul class="navbar-nav mx-auto align-items-lg-center">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown dropdown-fullwidth">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blocks</a>
<div class="dropdown-menu p-4">
<div class="row row-cols-xl-6 row-cols-lg-5 row-cols-1 gx-lg-4">
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/hero.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/hero-snippets-bootstrap.svg" alt="" />
</div>
<span>Hero</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/navbar.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/header-snippets-bootstrap.svg" alt="" />
</div>
<span>Navbar</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/about.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/about-snippets-bootstrap.svg" alt="" />
</div>
<span>About</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/blog.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/blog-snippets-bootstrap.svg" alt="" />
</div>
<span>Blog</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/carousel.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/carousel-snippets-bootstrap.svg" alt="" />
</div>
<span>Carousel</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/cta.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/call-to-action-snippets-bootstrap.svg" alt="" />
</div>
<span>Call to Action</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/clients.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/clients-logo-snippets-bootstrap.svg" alt="" />
</div>
<span>Client</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/contact.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/contact-section-example.svg" alt="" />
</div>
<span>Contact</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/form.html">
<div class="rounded d-none d-lg-block mb-lg-2"><img class="w-100 rounded-2" src="../../assets/images/block/form-snippets-bootstrap.svg" alt="" /></div>
<span>Form</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/faq.html">
<div class="rounded d-none d-lg-block mb-lg-2"><img class="w-100 rounded-2" src="../../assets/images/block/faq-section-example.svg" alt="" /></div>
<span>FAQ</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/team.html">
<div class="rounded d-none d-lg-block mb-lg-2"><img class="w-100 rounded-2" src="../../assets/images/block/team-snippets-bootstrap.svg" alt="" /></div>
<span>Team</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/footer.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/footer-snippets-bootstrap.svg" alt="" />
</div>
<span>Footer</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/features.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/feature-snippets-bootstrap.svg" alt="" />
</div>
<span>Features</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/integration.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/integration-snippets-bootstrap.svg" alt="" />
</div>
<span>Integration</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/location.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/location-snippets-bootstrap.svg" alt="" />
</div>
<span>Location</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/portfolio.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/portfolio-snippets-bootstrap.svg" alt="" />
</div>
<span>Portfolio</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/process.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/process-snippets-bootstrap.svg" alt="" />
</div>
<span>Process</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/pricing.html">
<div class="rounded d-none d-lg-block mb-lg-2 bg-gray-200">
<img class="w-100 rounded-2" src="../../assets/images/block/pricing-snippets-bootstrap.svg" alt="" />
</div>
<span>Pricing</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/facts.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/stats-snippets-bootstrap.svg" alt="" />
</div>
<span>Stats</span>
</a>
</div>
<div class="col">
<a class="dropdown-item d-block px-0 mb-lg-3" href="../../blocks/testimonails.html">
<div class="rounded d-none d-lg-block mb-lg-2">
<img class="w-100 rounded-2" src="../../assets/images/block/testimonial-snippets-bootstrap.svg" alt="" />
</div>
<span>Testimonials</span>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex mt-3 mt-lg-0" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>