<< Go back
Navbar - toggle
<div class="text-neutral-50 bsk-bg-blue py-4">
<div class="container flex justify-start px-8">
<div>
<button class="mobile-toggle focus:outline-none">
<svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
</div>
Collapse toggle left - with items
<nav class="text-neutral-50 bsk-bg-blue py-4">
<div class="container mx-auto px-8">
<div class="relative">
<!-- Toggle icon -->
<button
class="mobile-toggle focus:outline-none"
aria-expanded="false"
aria-haspopup="true"
aria-controls="main-menu"
>
<svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
<!-- Dropdown -->
<div
id="main-menu"
role="menu"
class="menu-dropdown hidden absolute left-0 -translate-x-6 mt-2
flex flex-col w-max
pt-2 pb-4 px-3 space-y-2
rounded-b-lg shadow-lg
bsk-bg-blue"
>
<a href="/" role="menuitem" class="block px-3 py-1 rounded hover:bsk-bg-blue-hover">Drop down item 1</a>
<a href="/" role="menuitem" class="block px-3 py-1 rounded hover:bsk-bg-blue-hover">Drop down item 2</a>
<a href="/" role="menuitem" class="block px-3 py-1 rounded hover:bsk-bg-blue-hover">Drop down item 3</a>
</div>
</div>
</div>
</nav>
<nav class="text-neutral-50 bsk-bg-blue py-4">
<div class="container flex justify-end px-8">
<div>
<button class="mobile-toggle focus:outline-none">
<svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
</nav>
Collapse toggle right - with items
<nav class="text-neutral-50 bsk-bg-blue py-4">
<div class="container flex justify-end px-8">
<div class="relative">
<!-- Toggle icon -->
<button
class="mobile-toggle focus:outline-none"
aria-expanded="false"
aria-haspopup="true"
aria-controls="main-menu"
>
<svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
<!-- Dropdown -->
<div
id="main-menu"
role="menu"
class="menu-dropdown hidden absolute right-0 translate-x-6 mt-2
flex flex-col w-max
pt-2 pb-4 px-3 space-y-2
rounded-b-lg shadow-lg
bsk-bg-blue"
>
<a href="/" role="menuitem" class="block px-3 py-1 rounded hover:bsk-bg-blue-hover">Drop down item 1</a>
<a href="/" role="menuitem" class="block px-3 py-1 rounded hover:bsk-bg-blue-hover">Drop down item 2</a>
<a href="/" role="menuitem" class="block px-3 py-1 rounded hover:bsk-bg-blue-hover">Drop down item 3</a>
</div>
</div>
</div>
</nav>