Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox
Copy any custom block snippet below and paste it on your page to build your website easily.
.hover-none class to .navbar either on HTML or Gulp classList..caret-none class to .navbar either on HTML or Gulp classList.
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
<div class="container xl:flex-row lg:flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img src="../../assets/img/logo-dark.png" srcset="../../assets/img/logo-dark@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-full !flex !ml-auto">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item dropdown language-select uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="../../contact.html" class="btn btn-sm btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]">Contact</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "center-nav transparent navbar-light",
"logoAlt": "logo-dark",
"otherClassList": "w-full flex ml-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})
<nav class="navbar navbar-expand-lg center-nav transparent navbar-dark">
<div class="container xl:flex-row lg:flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img class="logo-dark" src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
<img class="logo-light" src="../../assets/img/logo-light.png" srcset="../../assets/img/logo-light@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-full !flex !ml-auto">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item dropdown language-select uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="../../contact.html" class="btn btn-sm btn-white !rounded-[50rem]">Contact</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "center-nav transparent navbar-dark",
"logoBoth": true,
"otherClassList": "w-full flex ml-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-white !rounded-[50rem]",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})Check out some of the live examples: Shop or Product Page.
<nav class="navbar navbar-expand-lg center-nav navbar-light !bg-[#ffffff] ">
<div class="container xl:flex-row lg:flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-full !flex !ml-auto">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item dropdown language-select uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="../../contact.html" class="btn btn-sm btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]">Contact</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "center-nav navbar-light !bg-[#ffffff] ",
"otherClassList": "w-full flex ml-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})
<nav class="navbar navbar-expand-lg center-nav navbar-dark navbar- bg-[#21262c] opacity-100 ">
<div class="container xl:flex-row lg:flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img src="../../assets/img/logo-light.png" srcset="../../assets/img/logo-light@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-full !flex !ml-auto">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item dropdown language-select uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="../../contact.html" class="btn btn-sm btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]">Contact</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "center-nav navbar-dark navbar- bg-[#21262c] opacity-100 ",
"logoLight": true,
"otherClassList": "w-full flex ml-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})Check out some of the live examples: Demo 7.
<nav class="navbar navbar-expand-lg fancy navbar-light !bg-[#ffffff] caret-none xl:[background:0_0!important] lg:[background:0_0!important]">
<div class="container">
<div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row !flex-nowrap w-full justify-between items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-full !flex !ml-auto">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item dropdown language-select uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="../../contact.html" class="btn btn-sm btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]">Contact</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "fancy navbar-light !bg-[#ffffff] caret-none",
"fancy": true,
"otherClassList": "w-full flex ml-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
<nav class="navbar navbar-expand-lg classic transparent navbar-light">
<div class="container xl:flex-row lg:flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other lg:!ml-4 xl:!ml-4">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="#" class="btn btn-sm btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "classic transparent navbar-light",
"otherClassList": "lg:!ml-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})Check out some of the live examples: Demo 11.
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
<nav class="navbar navbar-expand-lg classic transparent navbar-dark">
<div class="container xl:flex-row lg:flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img class="logo-dark" src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
<img class="logo-light" src="../../assets/img/logo-light.png" srcset="../../assets/img/logo-light@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other lg:!ml-4 xl:!ml-4">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info2"><i class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="#" class="btn btn-sm btn-white !rounded-[50rem]" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "classic transparent navbar-dark",
"logoBoth": true,
"otherClassList": "lg:!ml-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-white !rounded-[50rem]",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
<nav class="navbar navbar-expand-lg classic navbar-light !bg-[#ffffff] ">
<div class="container xl:flex-row lg:flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other lg:!ml-4 xl:!ml-4">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info3"><i class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="#" class="btn btn-sm btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "classic navbar-light !bg-[#ffffff] ",
"otherClassList": "lg:!ml-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
<nav class="navbar navbar-expand-lg classic navbar-dark navbar- bg-[#21262c] opacity-100 ">
<div class="container xl:flex-row lg:flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img src="../../assets/img/logo-light.png" srcset="../../assets/img/logo-light@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other lg:!ml-4 xl:!ml-4">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info4"><i class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="#" class="btn btn-sm btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "classic navbar-dark navbar- bg-[#21262c] opacity-100 ",
"logoLight": true,
"otherClassList": "lg:!ml-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
<nav class="navbar navbar-expand-lg fancy navbar-light !bg-[#ffffff] xl:[background:0_0!important] lg:[background:0_0!important]">
<div class="container">
<div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row !flex-nowrap w-full justify-between items-center">
<div class="navbar-brand w-full">
<a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other lg:!ml-4 xl:!ml-4">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info5"><i class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
<li class="nav-item hidden xl:block lg:block md:block">
<a href="#" class="btn btn-sm btn-primary text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>@@include('_navbar.html', {
"classList": "fancy navbar-light !bg-[#ffffff] ",
"fancy": true,
"otherClassList": "lg:!ml-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:border-[#3f78e0] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})
<nav class="navbar navbar-expand-lg center-logo transparent navbar-light">
<div class="container justify-between items-center">
<div class="flex flex-row w-full justify-between items-center xl:hidden lg:hidden">
<div class="navbar-brand"><a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
</a></div>
<div class="navbar-other ml-auto">
<ul class="navbar-nav flex-row items-center">
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.flex -->
<div class="navbar-collapse-wrapper flex flex-row items-center w-full">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<a href="../../index.html" class="transition-none hidden xl:flex lg:flex"><img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image"></a>
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:hidden lg:hidden">Sandbox</h3>
<button type="button" class="btn-close btn-close-white xl:hidden lg:hidden" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-full order-1 lg:!order-none lg:flex xl:!order-none xl:flex">
<ul class="navbar-nav lg:!ml-auto xl:!ml-auto">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-full order-3 lg:!order-2 lg:flex">
<ul class="navbar-nav lg:!mr-auto xl:!mr-auto">
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="offcanvas-body xl:!hidden lg:!hidden order-4 mt-auto">
<div class="offcanvas-footer">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>@@include('_navbar-center-logo.html', {
"classList": "center-logo transparent navbar-light"
})Check out some of the live examples: Demo 13.
<nav class="navbar navbar-expand-lg center-logo transparent navbar-dark">
<div class="container justify-between items-center">
<div class="flex flex-row w-full justify-between items-center xl:hidden lg:hidden">
<div class="navbar-brand"><a href="../../index.html">
<img class="logo-dark" src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
<img class="logo-light" src="../../assets/img/logo-light.png" srcset="../../assets/img/logo-light@2x.png 2x" alt="image">
</a></div>
<div class="navbar-other ml-auto">
<ul class="navbar-nav flex-row items-center">
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.flex -->
<div class="navbar-collapse-wrapper flex flex-row items-center w-full">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<a href="../../index.html" class="transition-none hidden xl:flex lg:flex"><img class="logo-dark" src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
<img class="logo-light" src="../../assets/img/logo-light.png" srcset="../../assets/img/logo-light@2x.png 2x" alt="image"></a>
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:hidden lg:hidden">Sandbox</h3>
<button type="button" class="btn-close btn-close-white xl:hidden lg:hidden" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-full order-1 lg:!order-none lg:flex xl:!order-none xl:flex">
<ul class="navbar-nav lg:!ml-auto xl:!ml-auto">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-full order-3 lg:!order-2 lg:flex">
<ul class="navbar-nav lg:!mr-auto xl:!mr-auto">
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="offcanvas-body xl:!hidden lg:!hidden order-4 mt-auto">
<div class="offcanvas-footer">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>@@include('_navbar-center-logo.html', {
"logoBoth": true,
"classList": "center-logo transparent navbar-dark"
})
<nav class="navbar navbar-expand-lg center-logo navbar-light !bg-[#ffffff] ">
<div class="container justify-between items-center">
<div class="flex flex-row w-full justify-between items-center xl:hidden lg:hidden">
<div class="navbar-brand"><a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
</a></div>
<div class="navbar-other ml-auto">
<ul class="navbar-nav flex-row items-center">
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.flex -->
<div class="navbar-collapse-wrapper flex flex-row items-center w-full">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<a href="../../index.html" class="transition-none hidden xl:flex lg:flex"><img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image"></a>
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:hidden lg:hidden">Sandbox</h3>
<button type="button" class="btn-close btn-close-white xl:hidden lg:hidden" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-full order-1 lg:!order-none lg:flex xl:!order-none xl:flex">
<ul class="navbar-nav lg:!ml-auto xl:!ml-auto">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-full order-3 lg:!order-2 lg:flex">
<ul class="navbar-nav lg:!mr-auto xl:!mr-auto">
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="offcanvas-body xl:!hidden lg:!hidden order-4 mt-auto">
<div class="offcanvas-footer">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>@@include('_navbar-center-logo.html', {
"classList": "center-logo navbar-light !bg-[#ffffff] "
})
<nav class="navbar navbar-expand-lg center-logo navbar-dark navbar- bg-[#21262c] opacity-100 ">
<div class="container justify-between items-center">
<div class="flex flex-row w-full justify-between items-center xl:hidden lg:hidden">
<div class="navbar-brand"><a href="../../index.html">
<img src="../../assets/img/logo-light.png" srcset="../../assets/img/logo-light@2x.png 2x" alt="image">
</a></div>
<div class="navbar-other ml-auto">
<ul class="navbar-nav flex-row items-center">
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.flex -->
<div class="navbar-collapse-wrapper flex flex-row items-center w-full">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<img class="transition-none hidden lg:flex xl:flex logo-light" src="../../assets/img/logo-light.png" srcset="../../assets/img/logo-light@2x.png 2x" alt="image">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:hidden lg:hidden">Sandbox</h3>
<button type="button" class="btn-close btn-close-white xl:hidden lg:hidden" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-full order-1 lg:!order-none lg:flex xl:!order-none xl:flex">
<ul class="navbar-nav lg:!ml-auto xl:!ml-auto">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-full order-3 lg:!order-2 lg:flex">
<ul class="navbar-nav lg:!mr-auto xl:!mr-auto">
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="offcanvas-body xl:!hidden lg:!hidden order-4 mt-auto">
<div class="offcanvas-footer">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>@@include('_navbar-center-logo.html', {
"classList": "center-logo navbar-dark navbar- bg-[#21262c] opacity-100 ",
"logoLight": true
})
<nav class="navbar navbar-expand-lg fancy center-logo navbar-light !bg-[#ffffff] xl:[background:0_0!important] lg:[background:0_0!important]">
<div class="container">
<div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 xl:flex lg:flex flex-row !flex-nowrap w-full justify-between items-center">
<div class="flex flex-row w-full justify-between items-center xl:hidden lg:hidden">
<div class="navbar-brand"><a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image">
</a></div>
<div class="navbar-other ml-auto">
<ul class="navbar-nav flex-row items-center">
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.flex -->
<div class="navbar-collapse-inner flex flex-row items-center w-full mt-0">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!flex lg:!px-[5rem] xl:!order-1 xl:!flex xl:!px-[5rem]">
<a href="../../index.html" class="transition-none hidden xl:flex lg:flex"><img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image"></a>
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0 xl:hidden lg:hidden">Sandbox</h3>
<button type="button" class="btn-close btn-close-white xl:hidden lg:hidden" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-full order-1 lg:!order-none lg:flex xl:!order-none xl:flex">
<ul class="navbar-nav lg:!ml-auto xl:!ml-auto">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-full order-3 lg:!order-2 lg:flex">
<ul class="navbar-nav lg:!mr-auto xl:!mr-auto">
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="offcanvas-body xl:!hidden lg:!hidden order-4 mt-auto">
<div class="offcanvas-footer">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>@@include('_navbar-center-logo.html', {
"classList": "fancy center-logo navbar-light !bg-[#ffffff] ",
"fancy": true
}) Check out some of the live examples: Demo 12.
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
<nav class="navbar navbar-expand-lg extended navbar-light !bg-[#ffffff] xl:[background:0_0!important] lg:[background:0_0!important]">
<div class="container xl:flex-col lg:flex-col">
<div class="topbar flex flex-row w-full justify-between items-center">
<div class="navbar-brand"><a href="../../index.html"><img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image"></a></div>
<div class="navbar-other ml-auto">
<ul class="navbar-nav !flex-row items-center">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info6"><i class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
<li class="nav-item dropdown language-select uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.flex -->
<div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row items-center">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ml-auto w-full hidden xl:block lg:block">
<nav class="nav social social-muted justify-end text-right">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>@@include('_navbar-extended.html', {
"classList": "extended navbar-light !bg-[#ffffff] "
})Check out some of the live examples: Demo 24.
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
<nav class="navbar navbar-expand-lg extended extended-alt navbar-light !bg-[#ffffff] xl:[background:0_0!important] lg:[background:0_0!important]">
<div class="container xl:flex-col lg:flex-col">
<div class="topbar flex flex-row lg:!justify-center xl:!justify-center items-center">
<div class="navbar-brand"><a href="../../index.html"><img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="image"></a></div>
</div>
<!-- /.flex -->
<div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row items-center justify-between">
<div class="navbar-other w-full hidden lg:block xl:block">
<nav class="nav social social-muted">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.navbar-other -->
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:hidden lg:hidden">
<h3 class="text-white xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] !mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body flex flex-col !h-full">
<ul class="navbar-nav">
<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">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-[-15px] mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">One</h6>
<div class="flex flex-wrap mx-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:px-[7.5px] lg:px-[7.5px]">
<h6 class="dropdown-header">Three</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Large</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">One</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Two</h6>
<ul class="!pl-0 list-none">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another Link</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer xl:hidden lg:hidden">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] text-[#e94d88]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] text-[#c8312b]"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-full flex">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info7"><i class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></a></li>
<li class="nav-item xl:hidden lg:hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>@@include('_navbar-extended-alt.html', {
"classList": "extended navbar-light !bg-[#ffffff] "
})Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox