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 flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo-dark.png" srcset="./assets/img/logo-dark@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item dropdown language-select text-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 d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "center-nav transparent navbar-light",
"logoAlt": "logo-dark",
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})<nav class="navbar navbar-expand-lg center-nav transparent navbar-dark">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img class="logo-dark" src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item dropdown language-select text-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 d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-white rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "center-nav transparent navbar-dark",
"logoBoth": true,
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-white rounded-pill",
"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 navbar-bg-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item dropdown language-select text-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 d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "center-nav navbar-light navbar-bg-light",
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})<nav class="navbar navbar-expand-lg center-nav navbar-dark navbar-bg-dark">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item dropdown language-select text-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 d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "center-nav navbar-dark navbar-bg-dark",
"logoLight": true,
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})Check out some of the live examples: Demo 7.
<nav class="navbar navbar-expand-lg fancy navbar-light navbar-bg-light caret-none">
<div class="container">
<div class="navbar-collapse-wrapper bg-white d-flex flex-row flex-nowrap w-100 justify-content-between align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item dropdown language-select text-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 d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "fancy navbar-light navbar-bg-light caret-none",
"fancy": true,
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"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 flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-signin" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="mb-3 text-start">Welcome Back</h2>
<p class="lead mb-6 text-start">Fill your email and password to sign in.</p>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Sign In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" data-bs-target="#modal-signup" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->
<div class="modal fade" id="modal-signup" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="mb-3 text-start">Sign up to Sandbox</h2>
<p class="lead mb-6 text-start">Registration takes less than a minute.</p>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="text" class="form-control" placeholder="Name" id="loginName">
<label for="loginName">Name</label>
</div>
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPassword">Password</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Confirm Password" id="loginPasswordConfirm">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPasswordConfirm">Confirm Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Sign Up</a>
</form>
<!-- /form -->
<p class="mb-0">Already have an account? <a href="#" data-bs-target="#modal-signin" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign in</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
<div class="offcanvas-header">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="widget mb-8">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.offcanvas -->@@include('_navbar.html', {
"classList": "classic transparent navbar-light",
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"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 flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img class="logo-dark" src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-white rounded-pill" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-signin" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="mb-3 text-start">Welcome Back</h2>
<p class="lead mb-6 text-start">Fill your email and password to sign in.</p>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Sign In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" data-bs-target="#modal-signup" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
<div class="offcanvas-header">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="widget mb-8">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.offcanvas -->@@include('_navbar.html', {
"classList": "classic transparent navbar-dark",
"logoBoth": true,
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-white rounded-pill",
"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 navbar-bg-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-signin" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="mb-3 text-start">Welcome Back</h2>
<p class="lead mb-6 text-start">Fill your email and password to sign in.</p>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Sign In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" data-bs-target="#modal-signup" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
<div class="offcanvas-header">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="widget mb-8">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.offcanvas -->@@include('_navbar.html', {
"classList": "classic navbar-light navbar-bg-light",
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"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-dark">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-signin" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="mb-3 text-start">Welcome Back</h2>
<p class="lead mb-6 text-start">Fill your email and password to sign in.</p>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Sign In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" data-bs-target="#modal-signup" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
<div class="offcanvas-header">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="widget mb-8">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.offcanvas -->@@include('_navbar.html', {
"classList": "classic navbar-dark navbar-bg-dark",
"logoLight": true,
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"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 navbar-bg-light">
<div class="container">
<div class="navbar-collapse-wrapper bg-white d-flex flex-row flex-nowrap w-100 justify-content-between align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="trueLink">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-signin" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="mb-3 text-start">Welcome Back</h2>
<p class="lead mb-6 text-start">Fill your email and password to sign in.</p>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating password-field mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<span class="password-toggle"><i class="uil uil-eye"></i></span>
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Sign In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" data-bs-target="#modal-signup" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
<div class="offcanvas-header">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="widget mb-8">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.offcanvas -->@@include('_navbar.html', {
"classList": "fancy navbar-light navbar-bg-light",
"fancy": true,
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})<nav class="navbar navbar-expand-lg center-logo transparent navbar-light">
<div class="container justify-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<div class="navbar-brand"><a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center">
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper d-flex flex-row align-items-center w-100">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<a href="./index.html" class="transition-none d-none d-lg-flex"><img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" /></a>
<a href="./index.html" class="d-lg-none transition-none"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white d-lg-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-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-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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 order-4 mt-auto">
<div class="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@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-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<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="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center">
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper d-flex flex-row align-items-center w-100">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<a href="./index.html" class="transition-none"><img class="logo-dark" src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white d-lg-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-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-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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 order-4 mt-auto">
<div class="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar-center-logo.html', {
"logoBoth": true,
"classList": "center-logo transparent navbar-dark"
})<nav class="navbar navbar-expand-lg center-logo navbar-light navbar-bg-light">
<div class="container justify-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<div class="navbar-brand"><a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center">
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper d-flex flex-row align-items-center w-100">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<a href="./index.html" class="transition-none d-none d-lg-flex"><img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" /></a>
<a href="./index.html" class="d-lg-none transition-none"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white d-lg-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-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-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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 order-4 mt-auto">
<div class="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar-center-logo.html', {
"classList": "center-logo navbar-light navbar-bg-light"
})<nav class="navbar navbar-expand-lg center-logo navbar-dark navbar-bg-dark">
<div class="container justify-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<div class="navbar-brand"><a href="./index.html">
<img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center">
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper d-flex flex-row align-items-center w-100">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white d-lg-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-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-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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 order-4 mt-auto">
<div class="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar-center-logo.html', {
"classList": "center-logo navbar-dark navbar-bg-dark",
"logoLight": true
})<nav class="navbar navbar-expand-lg fancy center-logo navbar-light navbar-bg-light">
<div class="container">
<div class="navbar-collapse-wrapper bg-white d-lg-flex flex-row flex-nowrap w-100 justify-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<div class="navbar-brand"><a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center">
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-inner d-flex flex-row align-items-center w-100 mt-0">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<a href="./index.html" class="transition-none d-none d-lg-flex"><img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" /></a>
<a href="./index.html" class="d-lg-none transition-none"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white d-lg-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-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-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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 order-4 mt-auto">
<div class="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar-center-logo.html', {
"classList": "fancy center-logo navbar-light navbar-bg-light",
"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 navbar-bg-light">
<div class="container flex-lg-column">
<div class="topbar d-flex flex-row w-100 justify-content-between align-items-center">
<div class="navbar-brand"><a href="./index.html"><img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt="" /></a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item dropdown language-select text-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 d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper bg-white d-flex flex-row align-items-center">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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="d-lg-none mt-auto pt-6 pb-6 order-4">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /offcanvas-nav-other -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-auto w-100 d-none d-lg-block">
<nav class="nav social social-muted justify-content-end text-end">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
<div class="offcanvas-header">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="widget mb-8">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.offcanvas -->@@include('_navbar-extended.html', {
"classList": "extended navbar-light navbar-bg-light"
})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 navbar-bg-light">
<div class="container flex-lg-column">
<div class="topbar d-flex flex-row justify-content-lg-center align-items-center">
<div class="navbar-brand"><a href="./index.html"><img src="./assets/img/logo.png" srcset="./assets/img/logo@2x.png 2x" alt=""></a></div>
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper bg-white d-flex flex-row align-items-center justify-content-between">
<div class="navbar-other w-100 d-none d-lg-block">
<nav class="nav social social-muted">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.navbar-other -->
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<h3 class="text-white fs-30 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 d-flex flex-column h-100">
<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="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-6">
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<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="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<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="list-unstyled">
<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="list-unstyled">
<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 d-lg-none">
<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 href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></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"></i></a></li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
<div class="offcanvas-header">
<h3 class="text-white fs-30 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 pb-6">
<div class="widget mb-8">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.offcanvas -->
<div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
<div class="container d-flex flex-row py-6">
<form class="search-form w-100">
<input id="search-form" type="text" class="form-control" placeholder="Type keyword and hit enter">
</form>
<!-- /.search-form -->
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- /.container -->
</div>
<!-- /.offcanvas -->@@include('_navbar-extended-alt.html', {
"classList": "extended navbar-light navbar-bg-light"
})Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox