# Navbar #1

    <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>