<section>
<nav class="navbar navbar-expand-lg navbar-dark bg-black">
<div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
<button class="navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1 text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<div class="collapse navbar-collapse" id="nav01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="#">About us</a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="#">Wallet</a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="#">Blog</a></li>
</ul>
<div class="ms-14"><a class="btn btn-outline-light" href="#">Get in touch</a></div>
</div>
</div>
</nav>
<div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
<div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-primary-dark bg-opacity-25"></div>
<nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-black overflow-auto">
<div class="d-flex align-items-center justify-content-between mb-16"><a class="d-inline-block text-decoration-none" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a><a class="navbar-close text-primary" href="#">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
<path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" fill="currentColor"></path>
</svg></a></div>
<ul class="nav flex-column my-auto">
<li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Home</a></li>
<li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">About us</a></li>
<li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Wallet</a></li>
<li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Blog</a></li>
</ul><a class="btn mt-8 w-100 btn-outline-light" href="#">Get in touch</a>
</nav>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
