Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and Alpine js.
Right Offcanvas
Example Right Offcanvas.
<div x-data="{ open: false }">
<!-- Offcanvas button trigger -->
<button id="navbartoggle" type="button" class="inline-flex items-center justify-center text-gray-800 hover:text-gray-700 focus:outline-none focus:ring-0" aria-controls="mobile-menu" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
<span class="sr-only">Mobile menu</span>
<svg x-description="Icon closed" x-state:on="Menu open" x-state:off="Menu closed" class="block h-8 w-8" :class="{ 'hidden': open, 'block': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg x-description="Icon open" x-state:on="Menu open" x-state:off="Menu closed" class="hidden h-8 w-8" :class="{ 'block': open, 'hidden': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<!-- Right Offcanvas -->
<div class="fixed w-full h-full inset-0 z-50" id="mobile-menu" x-description="Mobile menu" x-show="open" style="display: none;">
<!-- bg open -->
<span class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
<!-- Mobile navbar -->
<nav id="mobile-nav" class="flex flex-col right-0 w-64 fixed top-0 py-4 bg-white dark:bg-gray-800 h-full overflow-auto z-40" x-show="open" @click.away="open=false" x-description="Mobile menu" role="menu" aria-orientation="vertical" aria-labelledby="navbartoggle" x-transition:enter="transform transition-transform duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition-transform duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
<div class="mb-auto">
<!--logo-->
<div class="mh-18 text-center px-12 mb-8">
<a href="#" class="flex relative">
<span class="text-4xl font-semibold px-4 dark:text-gray-100">Tail<span class="text-blue-700">Pro.</span></span>
<!-- <img src="src/img/logo.png" class="max-w-full h-auto" alt="logo"> -->
<span class="absolute -bottom-4 transform translate-x-1/2 w-20 h-0 border-t-2 border-opacity-50 border-blue-700 mx-auto"></span>
</a>
</div>
<!--navigation-->
<div class="mb-4">
<nav class="relative flex flex-wrap items-center justify-between">
<ul id="side-menu" class="w-full float-none flex flex-col">
<li class="relative">
<a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100">Home</a>
</li>
<li class="relative">
<a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100">About</a>
</li>
<!-- dropdown with submenu-->
<li class="relative" x-data="{ open: false }" @keydown.escape.stop="open = false" @click.away="open = false">
<a id="mobiledrop-04" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="javascript:;" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open" :class="{ 'text-blue-700 dark:text-gray-100': open }">
Dropdown
<!-- caret -->
<span class="inline-block ltr:float-right rtl:float-left mt-1 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="transform transition duration-300" :class="{ 'ltr:rotate-90 rtl:rotate-90' : open , 'ltr:rotate-0 rtl:rotate-180' : !open }" width=".8rem" height=".8rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</span>
</a>
<!-- dropdown menu -->
<ul class="block rounded rounded-t-none top-full z-50 py-0.5 ltr:text-left rtl:text-right bg-white dark:bg-gray-800 mb-4" style="min-width: 12rem" x-description="Dropdown menu" x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="mobiledrop-04">
<!--submenu-->
<li class="relative" x-data="{ open: false }" @keydown.escape.stop="open = false" @click.away="open = false">
<a id="sidemenu-01" class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="javascript:;" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open" :class="{ 'text-blue-700 dark:text-gray-100': open }">
Dropdown item
<!-- caret -->
<span class="inline-block ltr:float-right rtl:float-left mt-1 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="transform transition duration-300" :class="{ 'ltr:rotate-90 rtl:rotate-90' : open , 'ltr:rotate-0 rtl:rotate-180' : !open }" width=".8rem" height=".8rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</span>
</a>
<!--dropdown submenu-->
<ul class="block rounded rounded-t-none top-full z-50 ml-3 py-0.5 ltr:text-left rtl:text-right bg-white dark:bg-gray-800" style="min-width: 12rem" x-description="Dropdown menu" x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="sidemenu-01">
<li><a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown sub item</a></li>
<li><a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown sub item</a></li>
<li><a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown sub item</a></li>
<li><a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown sub item</a></li>
</ul>
</li><!--end submenu-->
</ul>
</li>
<!-- dropdown -->
<li class="relative" x-data="{ open: false }" @keydown.escape.stop="open = false" @click.away="open = false">
<a id="mobiledrop-03" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="javascript:;" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open" :class="{ 'text-blue-700 dark:text-gray-100': open }">
Dropdown
<!-- caret -->
<span class="inline-block ltr:float-right rtl:float-left mt-1 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="transform transition duration-300" :class="{ 'ltr:rotate-90 rtl:rotate-90' : open , 'ltr:rotate-0 rtl:rotate-180' : !open }" width=".8rem" height=".8rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</span>
</a>
<!-- dropdown menu -->
<ul class="block rounded rounded-t-none top-full z-50 py-0.5 ltr:text-left rtl:text-right bg-white dark:bg-gray-800 mb-4" style="min-width: 12rem" x-description="Dropdown menu" x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="mobiledrop-03">
<li class="relative">
<a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown item</a>
</li>
<li class="relative">
<a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown item</a>
</li>
<li class="relative">
<a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown item</a>
</li>
</ul>
</li>
<li class="relative">
<a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100">Support</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- copyright -->
<div class="mt-5 text-center">
<p>Copyright <a href="#">TailPro</a> - All right reserved</p>
</div>
</nav>
</div><!-- End Mobile menu -->
</div>
Left Offcanvas
Example Left Offcanvas.
<div x-data="{ open: false }">
<!-- Offcanvas button trigger -->
<button id="navbartoggle" type="button" class="inline-flex items-center justify-center text-gray-800 hover:text-gray-700 focus:outline-none focus:ring-0" aria-controls="mobile-menus" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
<span class="sr-only">Mobile menu</span>
<svg x-description="Icon closed" x-state:on="Menu open" x-state:off="Menu closed" class="block h-8 w-8" :class="{ 'hidden': open, 'block': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg x-description="Icon open" x-state:on="Menu open" x-state:off="Menu closed" class="hidden h-8 w-8" :class="{ 'block': open, 'hidden': !(open) }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<!-- Offcanvas -->
<div class="fixed w-full h-full inset-0 z-50" id="mobile-menus" x-description="Mobile menu" x-show="open" style="display: none;">
<!-- bg open -->
<span class="fixed bg-gray-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
<!-- Mobile navbar -->
<nav id="mobile-nav" class="flex flex-col left-0 w-64 fixed top-0 py-4 bg-white dark:bg-gray-800 h-full overflow-auto z-40" x-show="open" @click.away="open=false" x-description="Mobile menu" role="menu" aria-orientation="vertical" aria-labelledby="navbartoggle" x-transition:enter="transform transition-transform duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="-translate-x-0" x-transition:leave="transform transition-transform duration-300" x-transition:leave-start="-translate-x-0" x-transition:leave-end="-translate-x-full">
<div class="mb-auto">
<!--logo-->
<div class="mh-18 text-center px-12 mb-8">
<a href="#" class="flex relative">
<span class="text-4xl font-semibold px-4 dark:text-gray-100">Tail<span class="text-blue-700">Pro.</span></span>
<!-- <img src="src/img/logo.png" class="max-w-full h-auto" alt="logo"> -->
<span class="absolute -bottom-4 transform translate-x-1/2 w-20 h-0 border-t-2 border-opacity-50 border-blue-700 mx-auto"></span>
</a>
</div>
<!--navigation-->
<div class="mb-4">
<nav class="relative flex flex-wrap items-center justify-between">
<ul id="side-menu" class="w-full float-none flex flex-col">
<li class="relative">
<a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100">Home</a>
</li>
<li class="relative">
<a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100">About</a>
</li>
<!-- dropdown with submenu-->
<li class="relative" x-data="{ open: false }" @keydown.escape.stop="open = false" @click.away="open = false">
<a id="mobiledrop-04" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="javascript:;" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open" :class="{ 'text-blue-700 dark:text-gray-100': open }">
Dropdown
<!-- caret -->
<span class="inline-block ltr:float-right rtl:float-left mt-1 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="transform transition duration-300" :class="{ 'ltr:rotate-90 rtl:rotate-90' : open , 'ltr:rotate-0 rtl:rotate-180' : !open }" width=".8rem" height=".8rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</span>
</a>
<!-- dropdown menu -->
<ul class="block rounded rounded-t-none top-full z-50 py-0.5 ltr:text-left rtl:text-right bg-white dark:bg-gray-800 mb-4" style="min-width: 12rem" x-description="Dropdown menu" x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="mobiledrop-04">
<!--submenu-->
<li class="relative" x-data="{ open: false }" @keydown.escape.stop="open = false" @click.away="open = false">
<a id="sidemenu-01" class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="javascript:;" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open" :class="{ 'text-blue-700 dark:text-gray-100': open }">
Dropdown item
<!-- caret -->
<span class="inline-block ltr:float-right rtl:float-left mt-1 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="transform transition duration-300" :class="{ 'ltr:rotate-90 rtl:rotate-90' : open , 'ltr:rotate-0 rtl:rotate-180' : !open }" width=".8rem" height=".8rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</span>
</a>
<!--dropdown submenu-->
<ul class="block rounded rounded-t-none top-full z-50 ml-3 py-0.5 ltr:text-left rtl:text-right bg-white dark:bg-gray-800" style="min-width: 12rem" x-description="Dropdown menu" x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="sidemenu-01">
<li><a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown sub item</a></li>
<li><a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown sub item</a></li>
<li><a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown sub item</a></li>
<li><a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown sub item</a></li>
</ul>
</li><!--end submenu-->
</ul>
</li>
<!-- dropdown -->
<li class="relative" x-data="{ open: false }" @keydown.escape.stop="open = false" @click.away="open = false">
<a id="mobiledrop-03" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="javascript:;" @click="open = !open" aria-haspopup="true" x-bind:aria-expanded="open" :class="{ 'text-blue-700 dark:text-gray-100': open }">
Dropdown
<!-- caret -->
<span class="inline-block ltr:float-right rtl:float-left mt-1 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="transform transition duration-300" :class="{ 'ltr:rotate-90 rtl:rotate-90' : open , 'ltr:rotate-0 rtl:rotate-180' : !open }" width=".8rem" height=".8rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
</span>
</a>
<!-- dropdown menu -->
<ul class="block rounded rounded-t-none top-full z-50 py-0.5 ltr:text-left rtl:text-right bg-white dark:bg-gray-800 mb-4" style="min-width: 12rem" x-description="Dropdown menu" x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="mobiledrop-03">
<li class="relative">
<a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown item</a>
</li>
<li class="relative">
<a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown item</a>
</li>
<li class="relative">
<a class="block w-full py-2 px-6 clear-both whitespace-nowrap hover:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">Dropdown item</a>
</li>
</ul>
</li>
<li class="relative">
<a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700 dark:hover:text-gray-100 dark:focus:text-gray-100">Support</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- copyright -->
<div class="mt-5 text-center">
<p>Copyright <a href="#">TailPro</a> - All right reserved</p>
</div>
</nav>
</div><!-- End Mobile menu -->
</div>
Offcanvas is ready in default navbar Navbar Offcanvas mobile