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 dark:text-gray-400 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">
			                              <h2 class="text-2xl font-semibold text-gray-200 px-4 max-h-9 overflow-hidden"><img class="inline-block w-7 h-auto mr-2 -mt-1" src="../src/img/logo.png"><span class="text-gray-700 dark:text-gray-200">Taildash</span></h2>
			                            </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">Home</a>
			                                </li>
			                                <li class="relative">
			                                  <a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700">About</a>
			                                </li>

			                                <li class="relative">
			                                  <a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700">Support</a>
			                                </li>
			                              </ul>
			                            </nav>
			                          </div>
			                        </div>
			                        <!-- copyright -->
			                        <div class="mt-5 text-center">
			                          <p>Copyright <a href="#">Taildash</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 dark:text-gray-400 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">
			                              <h2 class="text-2xl font-semibold text-gray-200 px-4 max-h-9 overflow-hidden"><img class="inline-block w-7 h-auto mr-2 -mt-1" src="../src/img/logo.png"><span class="text-gray-700 dark:text-gray-200">Taildash</span></h2>
			                            </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">Home</a>
			                                </li>
			                                <li class="relative">
			                                  <a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700">About</a>
			                                </li>

			                                <li class="relative">
			                                  <a href="#" class="block py-3 px-4 hover:text-blue-700 focus:text-blue-700">Support</a>
			                                </li>
			                              </ul>
			                            </nav>
			                          </div>
			                        </div>
			                        <!-- copyright -->
			                        <div class="mt-5 text-center">
			                          <p>Copyright <a href="#">Taildash</a> - All right reserved</p>
			                        </div>
			                      </nav>
			                    </div><!-- End Mobile menu -->
			                  </div>
			                
			              

Offcanvas is ready in default navbar Navbar Offcanvas mobile