offcanvas
Default
<button class="bg-primary text-white hover:bg-primary-600 py-2 px-4 rounded transition-all" data-fc-target="default-offcanvas" data-fc-type="offcanvas">
Open Offcanvas
</button>
<div id="default-offcanvas" class="fc-offcanvas-open:translate-x-0 hidden -translate-x-full fixed top-0 left-0 transition-all duration-300 transform h-full max-w-xs w-full z-50 bg-white border-r dark:bg-gray-800 dark:border-gray-700" tabindex="-1">
<div class="flex justify-between items-center py-2 px-4 border-b dark:border-gray-700">
<h3 class="font-medium">
Offcanvas title
</h3>
<button class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-700 text-sm dark:text-gray-500 dark:hover:text-gray-400" data-fc-dismiss type="button">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-400">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
Auto Targeting
<button class="bg-primary text-white hover:bg-primary-600 py-2 px-4 rounded transition-all" data-fc-type="offcanvas">
Open Offcanvas
</button>
<div class="fc-offcanvas-open:translate-x-0 hidden -translate-x-full fixed top-0 left-0 transition-all duration-300 transform h-full max-w-xs w-full z-50 bg-white border-r dark:bg-gray-800 dark:border-gray-700"
tabindex="-1">
<div class="flex justify-between items-center py-2 px-4 border-b dark:border-gray-700">
<h3 class="font-medium">
Offcanvas title
</h3>
<button class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-700 text-sm dark:text-gray-500 dark:hover:text-gray-400" data-fc-dismiss type="button">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-400">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
Positions
<button class="btn bg-primary text-white" data-fc-type="offcanvas">
Left
</button>
<div class="fc-offcanvas-open:translate-x-0 hidden -translate-x-full fixed top-0 left-0 transition-all duration-300 transform h-full max-w-xs w-full z-50 bg-white border-r dark:bg-gray-800 dark:border-gray-700"
tabindex="-1">
<div class="flex justify-between items-center py-2 px-4 border-b dark:border-gray-700">
<h3 class="font-medium">
Offcanvas title
</h3>
<button class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-700 text-sm dark:text-gray-500 dark:hover:text-gray-400" data-fc-dismiss type="button">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-400">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<button class="btn bg-primary text-white" data-fc-type="offcanvas">
Top
</button>
<div class="fc-offcanvas-open:translate-y-0 -translate-y-full fixed top-0 inset-x-0 transition-all duration-300 transform max-h-40 h-full w-full z-50 bg-white border-b dark:bg-gray-800 dark:border-gray-700 hidden">
<div class="flex justify-between items-center py-2 px-4 border-b dark:border-gray-700">
<h3 class="font-medium">
Offcanvas title
</h3>
<button class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-700 text-sm dark:text-gray-500 dark:hover:text-gray-400" data-fc-dismiss type="button">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-400">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<button class="btn bg-primary text-white" data-fc-type="offcanvas">
Right
</button>
<div class="fc-offcanvas-open:translate-x-0 translate-x-full fixed top-0 right-0 transition-all duration-300 transform h-full max-w-xs w-full z-50 bg-white border-l dark:bg-gray-800 dark:border-gray-700 hidden">
<div class="flex justify-between items-center py-2 px-4 border-b dark:border-gray-700">
<h3 class="font-medium">
Offcanvas title
</h3>
<button class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-700 text-sm dark:text-gray-500 dark:hover:text-gray-400" data-fc-dismiss type="button">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-400">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<button class="btn bg-primary text-white" data-fc-type="offcanvas">
Bottom
</button>
<div class="fc-offcanvas-open:translate-y-0 translate-y-full fixed bottom-0 inset-x-0 transition-all duration-300 transform max-h-40 h-full w-full z-50 bg-white border-b dark:bg-gray-800 dark:border-gray-700 hidden">
<div class="flex justify-between items-center py-2 px-4 border-b dark:border-gray-700">
<h3 class="font-medium">
Offcanvas title
</h3>
<button class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-700 text-sm dark:text-gray-500 dark:hover:text-gray-400" data-fc-dismiss type="button">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="p-4">
<p class="text-gray-800 dark:text-gray-400">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>